0

For some reason my Javascript code does not work. But when I remove some of the Javascript lines, it works fine.

What am I doing wrong?

HTML:

<span id="21" class="addon-price">€ 0,00 p.m.</span>
<span id="57" class="addon-price">€ 0,00 p.m.</span>

Javascript:

document.getElementById("17").innerHTML = "Gratis";
document.getElementById("18").innerHTML = "Gratis";
document.getElementById("19").innerHTML = "Gratis";
document.getElementById("20").innerHTML = "Gratis";
document.getElementById("21").innerHTML = "Gratis";
document.getElementById("47").innerHTML = "Gratis";
document.getElementById("52").innerHTML = "Gratis";
document.getElementById("57").innerHTML = "Gratis";
document.getElementById("62").innerHTML = "Gratis";

JSFiddle: https://jsfiddle.net/4e362pg3/5/

Improve this question
3
  • 2
    you can't set innerHTML of a null element. add in all the rows in the html Commented Aug 16, 2016 at 15:25
  • Always check your console. Uncaught TypeError: Cannot set property 'innerHTML' of null at this line: document.getElementById("17").innerHTML = "Gratis"; because there is no element with the id 17. Commented Aug 16, 2016 at 15:26
  • Works fine jsbin.com/vagilaxuza/1/edit?html,js,console,output you have errors because you are trying to set a value on an object that doesn't exist. Commented Aug 16, 2016 at 15:28

2 Answers 2

Reset to default
2

Open your console.

Uncaught TypeError: Cannot set property 'innerHTML' of null

If the element does not exist in your DOM, the selector will return null. null.innerHTML is not defined, it throws an error and crashes the page.

Solution with jQuery (because you used the jQuery tag in your question) :

$("#17").html("Gratis);

This will never crash the page, even if the "17" element is not present.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks! But I need a code like this, because the ID's are generated dynamically. So sometimes it is displayed and the next time not. How do I need to edit this?
Use jQuery. It gracefully ignores non-present elements and does not crash your page. There's no many reasons why one would prefer vanilla javascript over jQuery, especially beginners.
@JeremyThille At the same time, jQuery puts beginners in a box that is nearly impossible to escape from without relearning tons of stuff. It wouldn't be so hard to make a function that does null-checking before it sets.
Oh I did :) I started with jQuery, then I learnt Javascript. I think the opposite, it's convenient and easy for beginners, then you climb the steps by learning pure JS.
@4castle thanks for correcting the typo, I did it at the same time :)
1

The JavaScript code is fine. You are getting exceptions, because you are trying to set the innerHTML of tags which are not there. Based on your code, the only two which will successfully work are the ones which try and set the span tags of 57, and 21. On all the others, the JavaScript throws an exception and stops the execution.

To fix it, all you need to do is wrap each set in a conditional to see if the element exists before trying to set the value. 

if(document.getElementById("17")) {
    document.getElementById("17").innerHTML = "Gratis";
}

Here is an example with a couple of the elements in the conditional.

Improve this answer

7 Comments

Thanks! But I need a code like this, because the ID's are generated dynamically. So sometimes it is displayed and the next time not. How do I need to edit this?
@HenkZ post your html
You made my day Kevin! :)
glad I could help!
This is going to create spaghetti code. Use an array containing the IDs and a loop. It would also be better to assign the element to a variable so that it doesn't have to get the element twice.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.