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

【问题标题】：How can I change the id of another item on a button click?如何在单击按钮时更改另一个项目的 ID？
【发布时间】：2019-08-07 23:20:01
【问题描述】：

我正在创建一个 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>

【问题讨论】：

if (document.getElementById('clickme').id="clicked") 这怎么可能是真的？如果 ID 是 clickme，则它不是 clicked。
1) if (document.getElementById('clickme').id="clicked") 是赋值，而不是比较 - 请使用 ===, 2) 修复后，这种比较永远不会成立，因为它就像比较 'a' 和 'b', 3 ) 正确的做法是使用类名，而不是更改id。 4) 将元素引用存储在变量中
您应该为此使用类而不是 ID
(stackoverflow.com/questions/1650299/…) 的可能重复

标签： javascript html google-chrome google-chrome-app

【解决方案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

【讨论】：