Javascript 和 HTML 文件上的淡入淡出和重置按鈕無響應

Question

我想透露，我對這一切都非常陌生，並且對術語等有一點了解。我為我的課程分配了預習，它指示我“使用 JavaScript 在按鈕單擊時更改框的 CSS 屬性” .

我設法使“增長”和“藍色”按鈕工作，但其他兩個沒有反應。 我正在使用 VS 代碼。 對於我的代碼中的任何問題，我將不勝感激。 謝謝！

 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

三個問題：

一個錯字： document,getElementById有一個逗號而不是一個點。
“lightOrange”不是有效的顏色名稱。 如果您不想使用 hex 或 rgb 代碼，這里有一個受支持名稱的參考： https://www.w3schools.com/cssref/css_colors.asp （但從長遠來看，您可能會更快樂地學習 hex 代碼； colors 充其量是不一致的命名。）
您的第四個 function 有一個明顯的復制粘貼錯誤，用addEventListener代替getElementById 。

修正版：

 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