Как я могу изменить идентификатор другого элемента по нажатию кнопки?

Question

Я создаю приложение Chrome, и мне нужно изменить идентификатор круга (он привязан к некоторому CSS, так что идентификатор определяет цвет), чтобы сделать круг другим цветом. Мне также нужно изменить значение кнопки на «Блокировка». Обратите внимание, что это приложение 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