How to fix javascript console errors for elements that don’t exist

  • Resolved fijisunshine

    (@fijisunshine)


    3 years, 7 months ago

    I have several div’s (with specific IDs) that, intentionally, exist for some users but not others.

    Users A: These div’s appear
    Users B: These div’s don’t appear

    The issue is that javascript functions that use these div’s (by using their IDs) cause console errors for Users B:

    Uncaught TypeError: Cannot set property ‘value’ of null

    I’ve tried using the following if statement to fix the issue. I also tried adding “!= null” and “!= ‘undefined'” in the if statement, but that doesn’t solve it.

    <script>if(document.getElementById(“my_id”)){document.getElementById(“my_id”).value = “Contents of the div go here”;}</script>

    Any suggestions for how to prevent these console errors? Thank you

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator bcworkz

    (@bcworkz)

    Assign the found element to a variable so script doesn’t have to repeatedly find the same element in the DOM over and over. Do something like:

    var myDiv = document.getElementById('my_id');
if ( null != myDiv ) {
  myDiv.value = 'foo!';
}
    Thread Starter fijisunshine

    (@fijisunshine)

    Thank you for your reply @bcworkz. Smart idea.

    However, I’m still getting the console error when using your suggestion on .value

    Your suggestion did seem to work for .innerHTML but not .value

    Any suggestions? Thanks again

    Moderator bcworkz

    (@bcworkz)

    My bad, .value is for form field elements. Use .innerHTML for div elements.

    Thread Starter fijisunshine

    (@fijisunshine)

    Thank you @bcworkz. Ok my apologies, I had simplified my question to only div’s. But I also have form fields that use .value in the javascript.

    <script>var my_form_field = document.getElementById(“my_form_field”);
    if(my_form_field != null){my_form_field.value = “Contents of form field”;}</script>

    Generates “Uncaught TypeError: Cannot set property ‘value’ of null” in the console when using your suggestion. i.e. your suggestion works on divs with .innerHTML but not on form fields with .value

    Can you suggest a solution for form fields with .value? Thanks again

    Moderator bcworkz

    (@bcworkz)

    document.getElementById('my_id').value = 'foo!' should be correct for input fields (essentially equivalent to what I had previously). That type error message typically comes up when there’s no element with an ID attribute “my_id”. But then if ( null != myDiv ) is supposed to catch that.

    Anyway, the question really is how to know if the element is a input field or a div. Use element.nodeName. It’ll be either “DIV” or “INPUT” (or any other element name as applicable). The names will always be in all caps.

    Thread Starter fijisunshine

    (@fijisunshine)

    Thank you very much @bcworkz.

    I was mistaken. Yes, your solution works great for both .value and .innerHTML

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to fix javascript console errors for elements that don’t exist’ is closed to new replies.