如何在JS中更改背景颜色？
如何在JS中更改背景颜色？
提问于 2020-05-07 23:38:40
我需要更改来自JS的div(仪表板)的背景色。到目前为止，它只会更改一秒钟，然后重置回原始颜色。
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>
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-05-07 23:42:33
您需要使用preventDefault来禁用默认提交行为。
就像这样：
function validateForm(event) {
event.preventDefault();
var divtag = document.getElementById("dashboard");
divtag.style.backgroundColor = "red";
}Stack Overflow用户
发布于 2020-05-07 23:44:00
这是因为表单提交会重新加载页面。您可以通过将event传递给validateForm并在函数内部调用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>
Stack Overflow用户
发布于 2020-05-07 23:48:14
在onsubmit事件处理程序中返回函数，然后在函数中返回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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61661889
复制相关文章
相似问题
腾讯云开发者
