I could use some help calling my javascript

Code Feedback
1

So I am just starting a Coding Bootcamp at Northwestern, and our first Java coding challenge has me in a pickle. I believe my index.html is not calling on the javascript.js file properly. I know I am going to have issues with two of the four buttons in the javascript, but the first two (grow, and re-color) should be working fine.

Can anyone help me?

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Jiggle Into JavaScript</title>
    <!-- <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>

    <script type="text/javascript" src="javascript.js"></script>

</body>
</html>

javascript.js:

//grow
document.getElementById("button1").addEventListener("click", function(){

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

});

//blue
document.getElementById("button2").addEventListener("click", function(){

    document.getElementById("box").style.background-color = "blue";

});

//fade
document.getElementById("button3").addEventListener("click", function(){

    document.getElementById("box").style.background-color = "opaque"; 

});

//reset
document.getElementById("button4").addEventListener("click", function(){

    document.getElementById("box").animate({height:"150px", width="150px", background-color="orange|initial", margin="25px" }, "fast");
//old lines
//                                  .style.height = "150px"; 
//                                  style="height:150px; width:150px; background-color:orange; margin:25px"

});

any feedback would be great!

3

Oh thank you! I did not know about that!

4

Hi, I would need to see your whole project folder but is the filepath to your javascript.js definitely correct?

It’s usually a good idea to add a

console.log('JS ready');

to the top of any JS file you are referencing. Just as a sense check to ensure you’re getting it.

5

Heen:

Both files are contained within the same folder. Maybe if I changed the name of the javascript file with a more unique identifier just in case it is trying to call a different one?

Would the console.log go into the HTML file in the heading or at the end? What I mean is does it need to be anywhere specific?

8

rmdawson,

OK, understood for color and fade - then why does the height / width not work?

10

randelldawson,

I was able to use the following JS code and it works, readying what you wrote and based on other info, I don’t think it supposed to work.

document.getElementById(“button4”).addEventListener(“click”, function(){
//box.reset = location.reload(); May also work
document.getElementById(“box”).style =“height:150px; width:150px; background-color:orange”

});