0

I have a dropdown, when value of "Other" gets selected from that dropdown, it should trigger an input form field called other position to display in the UI. when the code runs and it gets to document.getElementById('otherPosition').hidden = false; I get the above error. why is it that the id is null?

HTML:

<div class="column" id="otherPosition" hidden>
                <div style="padding-right: 10px;">
                    <label for="signeeContact.otherPosition">Other Position</label>
                    <input type="text" value="{{_contract.signeeContact.otherPosition::input}}" placeholder="Other Position" />
                </div>
            </div>

function:

_displayOtherPositionField(val) {
                if (val != undefined) {
                    if (val == "28") {
                        document.getElementById('otherPosition').hidden = false;
                    }
                }
            }
Fighithebird
  • 33
  • 5
  • Do you add or remove that DIV dynamically? It sounds like it hasn't been added when the user selects from the dropdown. – Barmar Nov 30 '20 at 19:46
  • yes the DIV is hidden by default, when the option is selected from dropdown it should be toggled to display block. does that answer your q? – Fighithebird Nov 30 '20 at 19:57
  • https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element – epascarello Nov 30 '20 at 20:10
  • So means `document.getElementById('otherPosition')` is null so it is not finding the element – epascarello Nov 30 '20 at 20:10
  • Hidden doesn't make `document.getElementById` return null. – Barmar Nov 30 '20 at 20:22

1 Answers1

-1

It works fine here. Meaning that if you manage to link your elements in a similar way, it should also work fine. So the problem might be from somewhere else.

function displayOtherPositionField() {
let val = document.getElementById('test').value
  if (val != undefined) {
    if (val == "2") {
      document.getElementById('otherPosition').hidden = false;
    }
  }
}
<div class="column" id="otherPosition" hidden>
  <div style="padding-right: 10px;">
    <label for="signeeContact.otherPosition">Other Position</label>
    <input type="text" value="{{_contract.signeeContact.otherPosition::input}}" placeholder="Other Position" />
  </div>
</div>

<select name="numbers" id="test" onchange="displayOtherPositionField()">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

An alternative way of showing the div#otherPosition might be using CSS by document.getElementById('otherPosition').style.display = "block" while its default value is none

BeHFaR
  • 94
  • 3
  • 10
  • either way i get the same error. the function gets invoked no problem. it just doesn't recognizes this id for some reason. – Fighithebird Nov 30 '20 at 21:05
  • Can you provide more details of your code? – BeHFaR Nov 30 '20 at 23:41
  • The code is in Polymer JS so regular JavaScript event listener targeting id is not working. there are certain keywords such as `this.$.theId` that recognizes the field. let me know if you like more detail. – Fighithebird Dec 01 '20 at 14:54
  • Could you make the code block that throws error in an online environment such [jsFiddle](https://jsfiddle.net/)? then it gets easier to go through it and solve the problem – BeHFaR Dec 02 '20 at 15:31