Question

我想制作一些简单的按钮，每次按下时都会切换颜色。按下按钮，还需要将一些唯一的字符串传递给服务器。因此，在按下每个按钮时，我运行两个功能。我的问题是，当我运行此脚本时，按钮仅在显示警报消息Msg1后的时间段内将颜色更改为红色。当我对Msg2回答OK时，按钮的颜色将恢复为绿色。我在这里做错了什么？

<style>
.button { background-color: green; }
.buttonOn { background-color: red; }
</style>

<button id="r1" class="button" onclick="mF1(id)">Relay 1</button>

<script>

function mF1(btn) {
var property = document.getElementById(btn);
alert('Msg1: This is ' + property.className);
if (property.className == 'button')     
    { property.className = 'buttonOn' }
else 
    { property.className = 'button';  }
alert('Msg2: This is ' + property.className);
mF2(btn);            
}

function mF2(id) { window.location.href='?HVAC-' + id; }

</script>

Answer 1

您正在使用JavaScript来更改DOM。

然后您将location.href设置为新值。

这会导致加载新页面。

新页面没有您对DOM所做的修改。

您需要编写在页面加载时检查查询字符串的代码并设置相应的类。

在onclick上更改javascript中的样式

1 个答案: