Как исправить изменение CSS на кнопки после нажатия на

Question

Я пытаюсь создать код, чтобы кнопка меняла цвет и не могла быть нажата снова после однократного нажатия.Код делает все это, за исключением того, что он меняет все три кнопки, на которые я хочу воздействовать, когда вы нажимаете только одну кнопку.

var clicks = 0;

function onClick(event) {
  event.className = "button visited";
  if (clicks >= 2) {
    alert("WRONG! YOU LOSE! TRY AGAIN!");
    window.location.href = 'index.html';
  }
  clicks += 1;
  document.getElementById("clicks").innerHTML = clicks;
};

.button {
  font-family: "Arial", sans-serif;
  background-color: transparent;
  border: 10px dashed white;
  color: white;
  font-size: 30px;
  text-align: center;
  line-height: 0;
  cursor: pointer;
  border-radius: 8px;
  height: 200px;
  width: 400px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.visited {
  background-image: none;
  background-color: red;
  font-size: 35px;
  border: 10px dashed black;
  color: black;
  cursor: not-allowed;
}

.button:hover {
  background-image: none;
  background-color: white;
  font-size: 35px;
  border: 10px dashed black;
  color: black;
}

<button id="button1" class="button" type="button" onclick="onClick(this)">Button1</button>

<button id="button2" class="button" type="button" onclick="onClick(this)">Button2</button>

<button id="button3" class="button" type="button" onclick="onClick(this)">Button3</button>

Я хочу иметь возможность нажимать одну из кнопок, и только эта кнопка изменит цвета и не сможет нажиматься вместовсе кнопки меняются при нажатии одной кнопки.

Answer 1

передайте аргумент this.id, а не this, потому что мы хотим получить идентификатор нажатой кнопки.Итак, ваш код кнопки: ...

<button id="button1" class="button" type="button" onclick="onClick(this.id)">Button1</button>
<button id="button2" class="button" type="button" onclick="onClick(this.id)">Button2</button>
<button id="button3" class="button" type="button" onclick="onClick(this.id)">Button3</button>

и попробуйте ввести свой код js в формате, который я дал ниже.

var btn1_click = 0;
var btn2_click = 0;
var btn3_click = 0;

function onClick(clicked_id) {
    var btn_id = clicked_id

    if(btn_id == "button1" && btn1_click == 0)
    {
        btn1_click++ 

        your code 
    }
    else if(btn_id == "button2" && btn2_click == 0) 
    {
        btn2_click++

        your code 
    } 
    else if(btn_id == "button3" && btn3_click == 0) 
    {
        btn3_click++

        your code 
    }

А когда вы перезапустите, вы должны сбросить...

btn1_click = 0;
btn2_click = 0;
btn3_click = 0

Answer 2

Чтобы сделать кнопку неактивной, вам просто нужно ее отключить.Поэтому вам нужно передать идентификатор элемента, как показано здесь.

<button id="button1" class="button" type="button" onclick="onClick(this.id)">Button1</button>
<button id="button2" class="button" type="button" onclick="onClick(this.id)">Button2</button>
<button id="button3" class="button" type="button" onclick="onClick(this.id)">Button3</button>

Затем вы просто определяете метод, используя функцию .disabled для кнопки he.

function disableButton(id){
     document.getElementById(id).disabled = true;  
}