I could use some help calling my javascript

I could use some help calling my javascript
0

#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!


#2

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard.


#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?


#6

When setting style properties in JS, you have to use the camelCase version (no dahses). If you are not sure what camelCase is, then look it up.

Once you make this change, the first two buttons should work.


#7

Needs to be at the top of your javascript.js file


#8

rmdawson,

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


#9

The fade button is not working, because there is no color called “opaque”. What you want to research is the css property called “opacity”. Opacity refers to the level of transparency, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent/invisible. Now what I have said above, I “assumed” a definition of “fade” to mean still visible but see-through. I also referenced the opacity property. If you are use JQuery, you can take a look at these options, if you want to control “how” the fade happens.

The rest button is not working, because of three problems:

#1) .animate uses JQuery and the code you posted has JQuery commented out.

#2) .animate’s first parameter should be an object. You need to review the syntax of JavaScript objects. Below is an example of the correct syntax of an object:

var car = {type:"Fiat", model:"500", color:"#FFFFFF"};

#3) In JQuery, I am almost certain colors using text names as the color are not valid. You need to use #hexcode syntax for the color. For example, if I want to to use the color “Aqua” I would use #00FFFF.

This should point you in the right direction.


#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”

});