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/

JGeer
  • 1,768
  • 1
  • 31
  • 75
  • 2
    you can't set `innerHTML` of a null element. add in all the rows in the html – Daniel Lizik Aug 16 '16 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`. – Jason P Aug 16 '16 at 15:26
  • Works fine http://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. – Jonathan Newton Aug 16 '16 at 15:28

2 Answers2

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.

Jeremy Thille
  • 26,047
  • 12
  • 43
  • 63
  • 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? – JGeer Aug 16 '16 at 15:29
  • 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. – Jeremy Thille Aug 16 '16 at 15:31
  • @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. – 4castle Aug 16 '16 at 15:36
  • 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. – Jeremy Thille Aug 16 '16 at 15:37
  • @4castle thanks for correcting the typo, I did it at the same time :) – Jeremy Thille Aug 16 '16 at 15:43
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.

kemiller2002
  • 113,795
  • 27
  • 197
  • 251