如何在單擊按鈕時更改另一個項目的ID？

Question

我正在創建一個chrome應用程序，我需要更改一個圓圈的ID（它與某些CSS綁定，所以ID決定了顏色），以使圓圈變為其他顏色。 我還需要將按鈕的值更改為“鎖定”。 請注意，這是Chrome應用。 這是我的JavaScript：

document.getElementById("clickme").addEventListener('click', function() {
      document.getElementById('clickme').id = 'clicked';
    }

    if (document.getElementById('clickme').id = "clicked") {
      document.getElementById('redcircle').id = 'greencircle';
      document.getElementById('clicked').value = 'Lock';
    }

而我的HTML：

<tr>
<td>Door 116</td>
<td><span><div class="circle" id="redcircle"></div></span></td>
<td><button type="button" id="clickme" value="unlock">Unlock</button></td>

Answer 1

您的JavaScript完全錯誤：

• 您應該使用Class而不是id來更改顏色。
• 更改元素的id是個壞主意。

您的代碼應如下所示：

    document.getElementById("clickme").addEventListener('click', function() {
        let circle = document.getElementsByClassName('circle');
        if (circle.style.color == "red") {
          circle.style.color = "green";
          document.getElementById('click').value = 'Lock';
        }
        else {
          circle.style.color = "red";
          document.getElementById('click').value = 'Unlock';
        }
});

如有其他疑問，請不要猶豫！

您應該看一下：

https://www.w3schools.com/js/js_comparisons.asp

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/style