I have ten buttons I want when I press a button all buttons stop

user_15879072 0
Viewed 154

I have ten buttons I want when I press a button all the other buttons stop You did it and it worked, but if you do a reload, you can press another button. I want to prevent the user from pressing another button than the one he pressed.

html

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

javascript

  var clickCounter10 = window.localStorage.getItem('clickCounter10') || 0;
  var movetool10 = document.getElementById('movetool10');
  var man10 = 10;
  changeBtn10();
  movetool10.onclick = function() {
    clickCounter10++;
    window.localStorage.setItem('clickCounter10', clickCounter10);
    changeBtn10();
  };
  
  function changeBtn10() {
    clickCounter10 = parseInt(clickCounter10, 10);
    if (clickCounter10 === 2) {
      clickCounter10 = 0;
      document.getElementById('movetool10').innerHTML = 'ok 1';
      document.getElementById("man10").innerHTML = man10;
      
      document.getElementById("movetool").disabled = false;
      document.getElementById("movetool2").disabled = false;
      document.getElementById("movetool3").disabled = false;
      document.getElementById("movetool4").disabled = false;
      document.getElementById("movetool5").disabled = false;
      document.getElementById("movetool6").disabled = false;
      document.getElementById("movetool7").disabled = false;
      document.getElementById("movetool8").disabled = false;
      document.getElementById("movetool9").disabled = false;
    } else if(clickCounter10 !== 0) {
      document.getElementById('movetool10').innerHTML = 'no ok 1';
      document.getElementById("man10").innerHTML = man10 - 1;
      document.getElementById("movetool").disabled = true;
      document.getElementById("movetool2").disabled = true;
      document.getElementById("movetool3").disabled = true;
      document.getElementById("movetool4").disabled = true;
      document.getElementById("movetool5").disabled = true;
      document.getElementById("movetool6").disabled = true;
      document.getElementById("movetool7").disabled = true;
      document.getElementById("movetool8").disabled = true;
      document.getElementById("movetool9").disabled = true;
    }
  }
html javascript
2 Answers

EDIT: I've added some comments so you can read about it. Made it all if-else conditions.

Remove all your inline HTML event attributes. That's highly unmanageable. Imagine creating a function and an action handler per button. It could get messy. Use delegation:

JavaScript event delegation is a simple technique by which you add a single event handler to a parent element in order to avoid having to add event handlers to multiple child elements

You can achieve this with these few lines of code:

//get the active button
var activeButton = localStorage.getItem('activeButton');
var isActive = localStorage.getItem('isActive');
//get all the button
const allButtons = document.querySelectorAll(".button");

[...allButtons].forEach(function(thisButton) {
  /*
  If isActive equals true, 
  set thisButton disabled to true if activeButton is not equal to thisButton's id
*/

  if (isActive === 'true') {
    if (activeButton !== thisButton.id) {
      thisButton.disabled = true;
    }
  }
});

const movetool = event => {
  /*get current activeButton*/
  activeButton = localStorage.getItem('activeButton');
  /*
  get the closest button on call
*/
  const target = event.target.closest("button");
  /*
  diables all buttons
*/

  /*if active button is equal to target.id*/
  if (activeButton === target.id) {
    var enableAll = false;
    /*get the array from all the buttons*/
    Array.from(allButtons).forEach(function(thisButton) {
      if (thisButton.disabled) {
        enableAll = true;
        return;
      }
    });

    if (enableAll) {
      /*get the array from all the buttons*/
      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")) {
        /*
  sets disable to false on the closest button
      }
*/
        target.disabled = false;
        /*
  sets local storage new activeButton to the closest button's id
*/
        localStorage.setItem('isActive', true);
        localStorage.setItem('activeButton', target.id);
      }
    }
  } else {
    Array.from(allButtons).forEach(function(thisButton) {
      thisButton.disabled = true;
    });

    if (target.classList.contains("button")) {
      /*
  sets disable to false on the closest button
      }
*/
      target.disabled = false;
      /*
  sets local storage new activeButton to the closest button's id
*/
      localStorage.setItem('isActive', true);
      localStorage.setItem('activeButton', target.id);
    }

  }


}
/*
  a single event listener
*/
document.querySelector('.button_container').addEventListener('click', movetool);
<!-- wrap all buttons in a container to remove the event handlers -->
<div class="button_container">
  <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="movetool10">click 10</button>
</div>

user_124152870

just pre disable all buttons
if clickCounter10 != 0 or whatever you want

you can use querySelectorAll to do it all at once

var clickCounter10 = window.localStorage.getItem('clickCounter10') || 0,
    movetool10 = document.getElementById('movetool10'),
    man10 = 10,
    all_button = document.querySelectorAll(`button[id^="movetool"]`);

clickCounter10 = parseInt(clickCounter10, 10);

// pre disable all buttons if clickCounter10 != 0
all_button.forEach(button => {
    if (clickCounter10 != 0) {
        button.disabled = true;
    } else {
        button.disabled = false;
    }
});
// short version
all_button.forEach(button => button.disabled = (clickCounter10 != 0) ? true : false);

changeBtn10();
movetool10.onclick = function () {
    clickCounter10++;
    window.localStorage.setItem('clickCounter10', clickCounter10);
    changeBtn10();
};

function changeBtn10() {
    if (clickCounter10 === 2) {
        clickCounter10 = 0;
        document.getElementById('movetool10').innerHTML = 'ok 1';
        document.getElementById("man10").innerHTML = man10;
        all_button.forEach(button => button.disabled = false);
    } else if (clickCounter10 !== 0) {
        document.getElementById('movetool10').innerHTML = 'no ok 1';
        document.getElementById("man10").innerHTML = man10 - 1;
        all_button.forEach(button => button.disabled = true);
    }
}
user_138006160
Related