如何更改按钮单击中其他项目的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/en-US/docs/Web/API/HTMLElement/style