Javascript 和 HTML 文件上的淡入淡出和重置按钮无响应

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".我想透露，我对这一切都非常陌生，并且对术语等有一点了解。我为我的课程分配了预习，它指示我“使用 JavaScript 在按钮单击时更改框的 CSS 属性” .

I've managed to make the "grow" and "blue" buttons work, but the other two are unresponsive.我设法使“增长”和“蓝色”按钮工作，但其他两个没有反应。 I'm using VS Code.我正在使用 VS 代码。 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.一个错字： document,getElementById有一个逗号而不是一个点。
"lightOrange" is not a valid color name. “lightOrange”不是有效的颜色名称。 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.)如果您不想使用 hex 或 rgb 代码，这里有一个受支持名称的参考： https://www.w3schools.com/cssref/css_colors.asp （但从长远来看，您可能会更快乐地学习 hex 代码； colors 充其量是不一致的命名。）
Your fourth function has an apparent copy-paste error substituting addEventListener in the place of getElementById .您的第四个 function 有一个明显的复制粘贴错误，用addEventListener代替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>

Javascript 和 HTML 文件上的淡入淡出和重置按钮无响应

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-02-02 22:45:00

Javascript 和 HTML 文件上的淡入淡出和重置按钮无响应

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-02-02 22:45:00

解决方案1
0 已采纳 2021-02-02 22:45:00