如何修复被点击后改变的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

为了使按钮未点击，你只需要禁用它。所以，你需要通过元素的ID如下所示。

<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功能的方法。

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

Answer 2

通过参数this.id而不是这个，因为我们想获得点击按钮的ID。所以您的按钮的代码是...

<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