在onclick中更改javascript中的樣式

Question

我想制作一些簡單的按鈕，它們在每次按下時都會切換顏色。 按下按鈕還需要將一些唯一的字符串傳遞到服務器。 因此，在每個按鈕上按下我都會運行兩個功能。 我的問題是，當我運行此腳本時，按鈕僅在顯示警報消息Msg1后的一段時間內將顏色更改為紅色。 當我對Msg2回答“確定”時，按鈕的顏色恢復為綠色。 我在這里做錯了什么？

<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所做的修改。

---

您需要編寫代碼以在頁面加載並設置適當的類時檢查查詢字符串。