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

如何在单击按钮时更改另一个项目的ID？

1 个答案: