Linking Javascript to HTML

Question

I'm having trouble getting my simple javascript code to run and I'm thinking the code may not be linked correctly. Would you be kind enough to take a look? Here's the HTML code:

<!DOCTYPE html>
<html>
<head>
    <title>Jiggle Into JavaScript</title>
    <script type="text/javascript" src="javascript.js"></script>

    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->

</head>
<body>

    <p>Press the buttons to change the box!</p>

    <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

    <button id="Button1">Grow</button>
    <button id="Button2">Blue</button>
    <button id="Button3">Fade</button>
    <button id="Button4">Reset</button>

</body>
</html>

And here's the JS code:

document.getElementById("Button1").addEventListener("click", function(){

     document.getElementById("box").style.height=200%;

});

Thanks for any help you can provide!

You need to load the JS **after** the element with the id `Button1` — Alon Eitan, Jan 14 '17 at 20:00

score 2 · Answer 1 · edited May 23 '17 at 10:29

There are 3 problems:

In javascript, there is no 200%, JS is different than CSS. JS uses integers and strings. If you want to set an element's height to 200%, you need to type it in a string:
```
 document.getElementById("box").style.height="200%";
```
Your js file loads and so executes before the button loads. Hence document.getElementById("Button1") doesn't return the element, and you can't bind an event listener to it, so that when you click the button, there's nothing to do. You have two options:

2.1 Add a DOMContentLoaded listener to the window, or use jQuery's .ready(). If you do this, your code will execute after every HTML elements are loaded, because the browser first download the HTML file, and builds up the DOM. After it's done, you will able to find your button, and add listeners to it.

2.2 As others said, load your javascript after every HTML element, before the </body> tag. Since it executes after every element is loaded, this will work too. However, in general, we load JS files after the content for a better preforance, and not because we don't want to add a window load listener.
The 200% might not work. I guess you want to double the box's height, right? Setting the height with a given percent does not equals with scaling it. Sizes in percent are magical, they relate to their parent element, which in your case may not work as you except. You should try this:
```
var box = document.getElementById("box");
box.style.height = (parseInt(box.style.height) * 2) + "px";
```

score 0 · Answer 2 · answered Jan 14 '17 at 20:05

0

Add your script to the end of your body

<body>
  ...
  <script src="some.js"></script>
</body>

200% should be a string ("200%")

document.getElementById("box").style.height = "200%";

answered Jan 14 '17 at 20:05

webdeb

11,890
5
24
41

score 0 · Answer 3 · answered Jan 14 '17 at 20:20

Try this:

document.addEventListener('DOMContentLoaded', function(){ 
    document.getElementById("Button1").onclick = function(){
         document.getElementById("box").style.height='200px';
         //document.getElementById("box").style.height='200%';
    };
}, false);

I wrapped your code in DOMContentLoaded, so the code will work after page (document) is fully loaded. I also did some minor changes in your click function.

Linking Javascript to HTML

3 Answers3