当我按下一个按钮时，我有 10 个想要的按钮，出现 function

Question

I have a page with 10 buttons I want when I press a button the speech inside it changes And div appears, and when you click the second time, everything returns as it was

button 10 html

<button class="button" id="movetool">click 1</button>
<button class="button" id="movetool2">click 2</button>
<button class="button" id="movetool3">click 3</button>
<button class="button" id="movetool4">click 4</button>
<button class="button" id="movetool5">click 5</button>
<button class="button" id="movetool6">click 6</button>
<button class="button" id="movetool7">click 7</button>
<button class="button" id="movetool8">click 8</button>
<button class="button" id="movetool9">click 9</button>
<button class="button" id="movetool0">click 10</button>

button javacsript

var activeButton = localStorage.getItem('activeButton');
var isActive = localStorage.getItem('isActive');
const allButtons = document.querySelectorAll(".button");

[...allButtons].forEach(function(thisButton) {
  if (isActive === 'true') {
    if (activeButton !== thisButton.id) {
      thisButton.disabled = true;

    }
  }
});

const movetool = event => {
  activeButton = localStorage.getItem('activeButton');
  const target = event.target.closest("button");
  if (activeButton === target.id) {
    var enableAll = false;
    Array.from(allButtons).forEach(function(thisButton) {
      if (thisButton.disabled) {
        enableAll = true;
        return;
      }
    });

    if (enableAll) {
      Array.from(allButtons).forEach(function(thisButton) {
        thisButton.disabled = false;
      });

      localStorage.setItem('isActive', false);

    } else {
      Array.from(allButtons).forEach(function(thisButton) {
        thisButton.disabled = true;
      });
      if (target.classList.contains("button")) {
        target.disabled = false;
        localStorage.setItem('isActive', true);
        localStorage.setItem('activeButton', target.id);
      }
    }
  } else {
    Array.from(allButtons).forEach(function(thisButton) {
      thisButton.disabled = true;
    });
    if (target.classList.contains("button")) {
      target.disabled = false;
      localStorage.setItem('isActive', true);
      localStorage.setItem('activeButton', target.id);
    }
  }
}
document.querySelector('.button_container').addEventListener('click', movetool);

I want to change the text when I press the button to "clicked" and show div

code

the button is clicked

Answer 1

You should do:

allButtons.forEach(button => button.addEventListener("click", () => {
  localStorage.setItem('isActive', button.id)
  
  // Do that refresh loop you had at the top of your question
})

Answer 2

Inside your moveTool event listener callback

thisButton.innerHTML = 'clicked';