点击

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而不是this，因为我们要获取被单击按钮的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