why my js cannot be linked to html?

Question

<!doctype html>
<html>
 <head>
  <script type="text/javascript">
   var instock=true;
   var shipping=false; 
   
   var elstock= document.getElmentById('stock');
   elstock.className=instock;

   var elship= document.getElmentById('note');
   elship.className=shipping;
   //the text should be updated by values stored
   //in these variables.
  </script>
 </head>
 <body>
   <h1>Elderflower</h1>
   <div id="content">
    <div class="message">Available:
     <span id="stock"></span>
    </div>
    <div class="message">Shipping:
     <span id="shipping"></span> 
    </div>
   </div>
 </body>
</html>

why js cannot be linked to html??? and how i can link css images to js as well? For example, if it is true, show circle image. If it is false, show cross image.

Your script is executed before the page has loaded. So you can't get `stock` or `note` because they don't exist yet. And the typo as @JavierConde points out (use your console). — Matt Burland, Jan 25 '16 at 21:31
The code run before the document loading complete, wrap it inside `window.onload = function() { ... }` — Alon Eitan, Jan 25 '16 at 21:31
...there's actually 3 completely separate reasons why they wouldn't in that code...1) id="note" doesn't actually exist in that code, 2) you're trying to get them before they are loaded (i.e. the JS is before the elements the JS is trying to get, and is not on any sort of load event) and 3) `Elment` is spelled `Element` — Jimbo Jonny, Jan 25 '16 at 21:36

Javier Conde · Answer 1 · 2016-01-25T21:40:12.483

According to the Chrome console:

Uncaught TypeError: document.getElmentById is not a function

You are missing the 'e', try document.getElementById.

Also, once that´s fixed, you will see:

Cannot set property 'className' of null

That's because you need to run the code once the page is loaded (as stated in the comments).

Then you will have another problem because you are trying to access the element with id note and there's no one, I guess you are trying to get shipping there.

Try this code:

<!doctype html>
<html>
 <head>
  <script type="text/javascript">
   function onloaded () {
    var instock=true;
    var shipping=false; 
    var elstock= document.getElementById('stock');
    elstock.className=instock;

    var elship= document.getElementById('shipping');
    elship.className=shipping;
    //the text should be updated by values stored
    //in these variables.
   }
  </script>
 </head>
 <body onload="onloaded()">
   <h1>Elderflower</h1>
   <div id="content">
    <div class="message">Available:
     <span id="stock"></span>
    </div>
    <div class="message">Shipping:
     <span id="shipping"></span> 
    </div>
   </div>
 </body>
</html>

why my js cannot be linked to html?

1 Answers1