如何在 JS 中更改背景顏色？

Question

我需要從 JS 更改 div(dashboard) 的背景顏色。 截至目前，它只改變一秒鍾並重置回原始顏色。

 function validateForm() { var divtag = document.getElementById("dashboard"); divtag.style.backgroundColor = "red"; }

 <div id="dashboard"> <i class="fas fa-compact-disc fa-5x"></i> <form> <fieldset> <legend>Track Search</legend> <input type="text" id="tname" name="tname" placeholder="Specify a Track"> <button class="far fa-file-audio fa-2x" onclick="searchT()"></button> </fieldset> </form> <form name="color" onsubmit="validateForm()"> <fieldset> <legend>Music Dashboard Scheme</legend> <input type="radio" id="RGB" name="choice" value="RGB" checked="checked"> <label for="RGB">RGB</label> <input type="radio" id="HEX" name="choice" value="HEX"> <label for="HEX">HEX</label> <input type="text" id="cvalue" name="cvalue" placeholder="Enter Colour Value" required> <input type="submit" src="fas fa-palette fa-2x" alt="Submit"></input> </fieldset> </form> </div>

Answer 1

您需要使用preventDefault來禁用默認提交行為。

像那樣：

function validateForm(event) {
  event.preventDefault();

  var divtag = document.getElementById("dashboard");
  divtag.style.backgroundColor = "red";
}

Answer 2

發生這種情況是因為表單提交重新加載了頁面。 您可以通過將event傳遞給validateForm並在 function 中調用event.preventDefault來避免它。

 function validateForm(event) { event.preventDefault(); var divtag = document.getElementById("dashboard"); divtag.style.backgroundColor = "red"; }

 <div id="dashboard"> <i class="fas fa-compact-disc fa-5x"></i> <form> <fieldset> <legend>Track Search</legend> <input type="text" id="tname" name="tname" placeholder="Specify a Track"> <button class="far fa-file-audio fa-2x" onclick="searchT()"></button> </fieldset> </form> <form name="color" onsubmit="validateForm(event)"> <fieldset> <legend>Music Dashboard Scheme</legend> <input type="radio" id="RGB" name="choice" value="RGB" checked="checked"> <label for="RGB">RGB</label> <input type="radio" id="HEX" name="choice" value="HEX"> <label for="HEX">HEX</label> <input type="text" id="cvalue" name="cvalue" placeholder="Enter Colour Value" required> <input type="submit" src="fas fa-palette fa-2x" alt="Submit"> </fieldset> </form> </div>

Answer 3

在您的onsubmit事件處理程序中return function，然后在您的 function 中，返回false 。 這告訴瀏覽器不要提交您的表單。

 function validateForm() { var divtag = document.getElementById("dashboard"); divtag.style.backgroundColor = "red"; return false }

 <div id="dashboard"> <i class="fas fa-compact-disc fa-5x"></i> <form> <fieldset> <legend>Track Search</legend> <input type="text" id="tname" name="tname" placeholder="Specify a Track"> <button class="far fa-file-audio fa-2x" onclick="searchT()"></button> </fieldset> </form> <form name="color" onsubmit="return validateForm();"> <fieldset> <legend>Music Dashboard Scheme</legend> <input type="radio" id="RGB" name="choice" value="RGB" checked="checked"> <label for="RGB">RGB</label> <input type="radio" id="HEX" name="choice" value="HEX"> <label for="HEX">HEX</label> <input type="text" id="cvalue" name="cvalue" placeholder="Enter Colour Value" > <input type="submit" src="fas fa-palette fa-2x" alt="Submit" /> </fieldset> </form> </div>