Fade And Reset Buttons Not Responding On Javascript & HTML files

Question

I'd like to disclose that I am extremely new to all of this and have minor understanding of terms etc. I have prework assigned for my course and it's instructing me to "use JavaScript to change the CSS properties of a box upon button clicks".

I've managed to make the "grow" and "blue" buttons work, but the other two are unresponsive. I'm using VS Code. I'd appreciate any simple explanations to any problems in my code. Thanks!

 document.getElementById("growBtn").addEventListener("click", function(){document.getElementById("box").style.height = "250px"}); document.getElementById("blueBtn").addEventListener("click", function(){document.getElementById("box").style.backgroundColor = "blue" }); document.getElementById("fadeBtn").addEventListener("click", function(){document,getElementById("box").style.backgroundColor = "lightOrange" }); document.addEventListener("resetBtn").addEventListener("click", function(){document.getElementById("box").style.height = "150px"});

 <: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="growBtn">Grow</button> <button id="blueBtn">Blue</button> <button id="fadeBtn">Fade</button> <button id="resetBtn">Reset</button> <script type="text/javascript" src="javascript.js"></script> </body> </html>

Answer 1

Three problems:

A typo: document,getElementById has a comma instead of a dot.
"lightOrange" is not a valid color name. If you prefer not to use hex or rgb codes, one reference for supported names is here: https://www.w3schools.com/cssref/css_colors.asp (but you'll likely be happier in the long run learning hex codes; the colors are at best inconsistently named.)
Your fourth function has an apparent copy-paste error substituting addEventListener in the place of getElementById .

Corrected version:

 document.getElementById("growBtn").addEventListener("click", function() { document.getElementById("box").style.height = "250px" }); document.getElementById("blueBtn").addEventListener("click", function() { document.getElementById("box").style.backgroundColor = "blue" }); document.getElementById("fadeBtn").addEventListener("click", function() { document.getElementById("box").style.backgroundColor = "peachpuff" }); document.getElementById("resetBtn").addEventListener("click", function() { document.getElementById("box").style.height = "150px" });

 <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="growBtn">Grow</button> <button id="blueBtn">Blue</button> <button id="fadeBtn">Fade</button> <button id="resetBtn">Reset</button>

Fade And Reset Buttons Not Responding On Javascript & HTML files

Question

1 answers

solution1
0 ACCPTED 2021-02-02 22:45:00

Fade And Reset Buttons Not Responding On Javascript & HTML files

Question

1 answers

solution1 0 ACCPTED 2021-02-02 22:45:00

solution1
0 ACCPTED 2021-02-02 22:45:00