单击时如何更改按钮的值？答案

【问题标题】：How can I change the value of the button when clicked?单击时如何更改按钮的值？
【发布时间】：2019-12-20 12:34:38
【问题描述】：

在课堂上，我正在做一个井字游戏，并被困了 2 天，试图让 x 和 o 出现，明天就要交作业了！这是作业表：

COMPSCI20：井字游戏作业

如上所示创建一个 HTML 文件。 HTML 文件应包含以下内容：

页面标题和指向 CSS 文件的链接
包含文本的标题分区（带有 ID）
一个主分区（带有 ID），包含一个 3x3 的可点击按钮表（带有一个类，每个都有 ID）
包含文本的页脚分区（带有 ID）标题 + 链接  主要 + 表格  页眉  页脚 

创建一个 CSS 文件来设置如上所示的内容样式。 CSS 文件应包含以下内容：

在标题分区中，定义字体、背景颜色、文本对齐方式和填充
在主分区中，定义背景颜色和内边距
按钮应具有定义的高度、宽度、字体、背景颜色和边框
在页脚划分中，定义字体、背景颜色、文本对齐和填充

创建一个包含两个全局变量的 JS 文件：一个存储玩家回合（X 或 O），一个存储获胜者。 JS文件还应包含以下函数：

Start() 函数将玩家轮到开始设置为 X，将获胜者设置为 null
ChooseSquare() 函数将适当的字母放在单击的按钮上，禁用按钮点击，并切换到其他玩家的回合
CheckWin() 函数检查每个可能的获胜组合并在玩家获胜时的页脚

这是我所拥有的：

var winner;
var current;

function Start() {
  current = "x";
}

function ChooseSquare() {
  if (document.getElementById("button1").onclick) {
    document.getElementById("button1").value = "x";
    document.getElementById("button1").disabled = true;
    current = "o";
  } else if (document.getElementById("button2").onclick) {
    document.getElementById("button2").value = "x";
    document.getElementById("button2").disabled = true;
    current = "o";
  } else if (document.getElementById("button3").onclick) {
    document.getElementById("button3").value = "x";
    document.getElementById("button3").disabled = true;
    current = "o";
  } else if (document.getElementById("button4").onclick) {
    document.getElementById("button4").value = "x";
    document.getElementById("button4").disabled = true;
    current = "o";
  } else if (document.getElementById("button5").onclick) {
    document.getElementById("button5").value = "x";
    document.getElementById("button5").disabled = true;
    current = "o";
  } else if (document.getElementById("button6").onclick) {
    document.getElementById("button6").value = "x";
    document.getElementById("button6").disabled = true;
    current = "o";
  } else if (document.getElementById("button7").onclick) {
    document.getElementById("button7").value = "x";
    document.getElementById("button7").disabled = true;
    current = "o";
  } else if (document.getElementById("button8").onclick) {
    document.getElementById("button8").value = "x";
    document.getElementById("button8").disabled = true;
    current = "o";
  } else if (document.getElementById("button9").onclick) {
    document.getElementById("button9").value = "x";
    document.getElementById("button9").disabled = true;
    current = "o";
  }


  if (document.getElementById("button1").onclick) {
    document.getElementById("button1").value = "o";
    document.getElementById("button1").disabled = true;
    current = "x"
    1;
  } else if (document.getElementById("button2").onclick) {
    document.getElementById("button2").value = "o";
    document.getElementById("button2").disabled = true;
    current = "x";
  } else if (document.getElementById("button3").onclick) {
    document.getElementById("button3").value = "o";
    document.getElementById("button3").disabled = true;
    current = "x";
  } else if (document.getElementById("button4").onclick) {
    document.getElementById("button4").value = "o";
    document.getElementById("button4").disabled = true;
    current = "x";
  } else if (document.getElementById("button5").onclick) {
    document.getElementById("button5").value = "x";
    document.getElementById("button5").disabled = true;
    current = "x";
  } else if (document.getElementById("button6").onclick) {
    document.getElementById("button6").value = "o";
    document.getElementById("button6").disabled = true;
    current = "x";
  } else if (document.getElementById("button7").onclick) {
    document.getElementById("button7").value = "o";
    document.getElementById("button7").disabled = true;
    current = "x";
  } else if (document.getElementById("button8").onclick) {
    document.getElementById("button8").value = "o";
    document.getElementById("button8").disabled = true;
    current = "x";
  } else if (document.getElementById("button9").onclick) {
    document.getElementById("button9").value = "o";
    document.getElementById("button9").disabled = true;
    current = "x";
  }
}

function CheckWin() {
  var one = document.getElementById("button1");
  var two = document.getElementById("button2");
  var three = document.getElementById("button3");
  var four = document.getElementById("button4");
  var five = document.getElementById("button5");
  var six = document.getElementById("button6");
  var seven = document.getElementById("button7");
  var eight = document.getElementById("button8");
  var nine = document.getElementById("button9");
  //x wins
  if (one == "x" && two == "x" && three == "x") {
    window.alert("player1 has won")
  }
  if (one == "x" && four == "x" && seven == "x") {
    window.alert("player1 has won")
  }
  if (one == "x" && five == "x" && nine == "x") {
    window.alert("player1 has won")
  }
  if (two == "x" && five == "x" && eight == "x") {
    window.alert("player1 has won")
  }
  if (three == "x" && six == "x" && nine == "x") {
    window.alert("player1 has won")
  }
  if (three == "x" && five == "x" && seven == "x") {
    window.alert("player1 has won")
  }
  if (four == "x" && five == "x" && six == "x") {
    window.alert("player1 has won")
  }
  if (seven == "x" && nine == "x" && eight == "x") {
    window.alert("player1 has won")
  }
  //o wins
  if (one == "o" && two == "o" && three == "o") {
    window.alert("player2 has won")
  }
  if (one == "o" && four == "o" && seven == "o") {
    window.alert("player2 has won")
  }
  if (one == "o" && five == "o" && nine == "o") {
    window.alert("player2 has won")
  }
  if (two == "o" && five == "o" && eight == "o") {
    window.alert("player2 has won")
  }
  if (three == "o" && six == "o" && nine == "o") {
    window.alert("player2 has won")
  }
  if (three == "o" && five == "o" && seven == "o") {
    window.alert("player2 has won")
  }
  if (four == "o" && five == "o" && six == "o") {
    window.alert("player2 has won")
  }
  if (seven == "o" && nine == "o" && eight == "o") {
    window.alert("player2 has won")
  }
}

function reset() {
  one.value = " "
  one.disabled = false
  two.value = " "
  two.disabled = false
  two.value = " "
  three.disabled = false
  three.value = " "
  four.disabled = false
  four.value = " "
  five.disabled = false
  five.value = " "
  six.disabled = false
  six.value = " "
  seven.disabled = false
  seven.value = " "
  eight.disabled = false
  eight.value = " "
  nine.disabled = false
  nine.disabled = false
}

#Header {
  background-color: Red;
  color: white;
  text-align: center;
  font-family: Acme, Arial, sans-serif;
  padding: 5px;
}

#Main {
  margin-left: 200px;
  margin-right: 100px;
  padding: 0px;
  background-color: white;
}

td {
  width: 30px;
  height: 70px;
}

#Footer {
  background-color: grey;
  text-align: center;
  color: white;
  font-family: "Playfair Display", "Times New Roman", serif;
  padding: 0px;
  font-size: 20px;
}

.button {
  height: 100px;
  width: 100px;
  background-color: purple;
  font-family: Acme, Arial, sans-serif;
  border-color: black;
  border-width: 5px;
  color: white;
  font-size: 20px;
}

<html>

<head>
  <title> Tic Tac Toe </title>
  <link href="https://fonts.googleapis.com/css?family=Acme|Playfair+Display&display=swap" rel="stylesheet">
</head>

<body onload="Start()">

  <div id="Header">
    <h1> Tic Tac Toe </h1>
  </div>
  <div id="Main">
    <table>
      <tr>
        <td id="button1"> <input class="button" type="button" onclick="ChooseSquare()"></td>
        <td id="button2"> <input class="button" type="button" onclick="ChooseSquare()"></td>
        <td id="button3"> <input class="button" type="button" onclick="ChooseSquare()"></td>
      </tr>
      <tr>
        <td id="button4"> <input class="button" type="button" onclick="ChooseSquare()"></td>
        <td id="button5"> <input class="button" type="button" onclick="ChooseSquare()"></td>
        <td id="button6"> <input class="button" type="button" onclick="ChooseSquare()"></td>
      </tr>
      <tr>
        <td id="button7"> <input class="button" type="button" onClick="ChooseSquare()"></td>
        <td id="button8"> <input class="button" type="button" onClick="ChooseSquare()"></td>
        <td id="button9"> <input class="button" type="button" onClick="ChooseSquare()"></td>
      </tr>
    </table>
    <input type="button" onClick='reset()' value="reset">
  </div>
  <div id="Footer">
    <p id="foot"> Read to Play? Click on a square!</p>
  </div>
</body>

</html>

【问题讨论】：

您没有正确使用.onclick。您需要将其设置为等于一个函数。请参阅示例here。还有document.getElementById("button1")等...永远不会等于“x”或“o”，你需要得到它的值
您可以使用this 作为一个简单的帮助示例。对于使用更好约定的内容，您可以使用this。

标签： javascript html css

【解决方案1】：

if (document.getElementById("button1").onclick) 不是你测试他们是否点击button1 的方式。这只是测试onclick 属性是否包含任何内容，因为它包含onclick="ChooseSquare()" 属性的值。

您可以通过使函数接受参数来解决此问题。您可以将this 作为参数传递给函数，然后它可以使用它来更新用户单击的按钮。

在CheckWin() 中，您需要获取按钮的值。此外，ID 必须位于 <button> 元素上，而不是 <td>s。

在reset() 中，您使用了变量one、two 等，但这些变量是CheckWin 的本地变量。我将其更改为使用 class="button" 循环遍历所有元素。

var winner;
var current;

function Start() {
  current = "x";
}

function ChooseSquare(button) {
  button.value = current;
  current = (current == "x") ? "o" : "x";
  button.disabled = true; // Prevent clicking button twice
  CheckWin();
}

function CheckWin() {
  var one = document.getElementById("button1").value;
  var two = document.getElementById("button2").value;
  var three = document.getElementById("button3").value;
  var four = document.getElementById("button4").value;
  var five = document.getElementById("button5").value;
  var six = document.getElementById("button6").value;
  var seven = document.getElementById("button7").value;
  var eight = document.getElementById("button8").value;
  var nine = document.getElementById("button9").value;
  //x wins
  if (one == "x" && two == "x" && three == "x") {
    window.alert("player1 has won")
  }
  if (one == "x" && four == "x" && seven == "x") {
    window.alert("player1 has won")
  }
  if (one == "x" && five == "x" && nine == "x") {
    window.alert("player1 has won")
  }
  if (two == "x" && five == "x" && eight == "x") {
    window.alert("player1 has won")
  }
  if (three == "x" && six == "x" && nine == "x") {
    window.alert("player1 has won")
  }
  if (three == "x" && five == "x" && seven == "x") {
    window.alert("player1 has won")
  }
  if (four == "x" && five == "x" && six == "x") {
    window.alert("player1 has won")
  }
  if (seven == "x" && nine == "x" && eight == "x") {
    window.alert("player1 has won")
  }
  //o wins
  if (one == "o" && two == "o" && three == "o") {
    window.alert("player2 has won")
  }
  if (one == "o" && four == "o" && seven == "o") {
    window.alert("player2 has won")
  }
  if (one == "o" && five == "o" && nine == "o") {
    window.alert("player2 has won")
  }
  if (two == "o" && five == "o" && eight == "o") {
    window.alert("player2 has won")
  }
  if (three == "o" && six == "o" && nine == "o") {
    window.alert("player2 has won")
  }
  if (three == "o" && five == "o" && seven == "o") {
    window.alert("player2 has won")
  }
  if (four == "o" && five == "o" && six == "o") {
    window.alert("player2 has won")
  }
  if (seven == "o" && nine == "o" && eight == "o") {
    window.alert("player2 has won")
  }
}

function reset() {
  Array.from(document.querySelectorAll(".button")).forEach(b => {
    b.value = " ";
    b.disabled = false;
  });
}

#Header {
  background-color: Red;
  color: white;
  text-align: center;
  font-family: Acme, Arial, sans-serif;
  padding: 5px;
}

#Main {
  margin-left: 200px;
  margin-right: 100px;
  padding: 0px;
  background-color: white;
}

td {
  width: 30px;
  height: 70px;
}

#Footer {
  background-color: grey;
  text-align: center;
  color: white;
  font-family: "Playfair Display", "Times New Roman", serif;
  padding: 0px;
  font-size: 20px;
}

.button {
  height: 100px;
  width: 100px;
  background-color: purple;
  font-family: Acme, Arial, sans-serif;
  border-color: black;
  border-width: 5px;
  color: white;
  font-size: 20px;
}

<html>

<head>
  <title> Tic Tac Toe </title>
  <link href="https://fonts.googleapis.com/css?family=Acme|Playfair+Display&display=swap" rel="stylesheet">
</head>

<body onload="Start()">

  <div id="Header">
    <h1> Tic Tac Toe </h1>
  </div>
  <div id="Main">
    <table>
      <tr>
        <td> <input id="button1" class="button" type="button" onclick="ChooseSquare(this)"></td>
        <td> <input id="button2" class="button" type="button" onclick="ChooseSquare(this)"></td>
        <td> <input id="button3" class="button" type="button" onclick="ChooseSquare(this)"></td>
      </tr>
      <tr>
        <td> <input id="button4" class="button" type="button" onclick="ChooseSquare(this)"></td>
        <td> <input id="button5" class="button" type="button" onclick="ChooseSquare(this)"></td>
        <td> <input id="button6" class="button" type="button" onclick="ChooseSquare(this)"></td>
      </tr>
      <tr>
        <td> <input id="button7" class="button" type="button" onClick="ChooseSquare(this)"></td>
        <td> <input id="button8" class="button" type="button" onClick="ChooseSquare(this)"></td>
        <td> <input id="button9" class="button" type="button" onClick="ChooseSquare(this)"></td>
      </tr>
    </table>
    <input type="button" onClick='reset()' value="reset">
  </div>
  <div id="Footer">
    <p id="foot"> Read to Play? Click on a square!</p>
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

我无法抗拒……

const main    = document.querySelector('#Main')
  ,   All_bt  = document.querySelectorAll('#Main > button')
  ,   btReset = document.querySelector('#bt-reset')
  ;
var current = 0
  , players = [ { cod: 'x', case: [ ] } 
              , { cod: 'o', case: [ ] } 
              ]
    ;
main.onclick=e=>
  {
  if (e.target.tagName.toLowerCase() !== 'button') return;
  e.target.textContent = players[current].cod;
  e.target.disabled = true
  players[current].case.push( e.target.id.slice(-3))

// check win...
    let Win = false
      , Kaz = []
    for(i=1;i<4;i++)
      {
      Kaz = players[current].case.filter(K=>Number(K.charAt(0))===i)
      if (Kaz.length===3) { Win=true; break }
      Kaz = players[current].case.filter(K=>Number(K.charAt(2))===i)
      if (Kaz.length===3) { Win=true; break }
      }
    if (!Win)
      {
      Kaz = players[current].case.filter(K=>K==='1-1' || K==='2-2' || K==='3-3')
      Win = (Kaz.length===3)
      }
    if (!Win)
      {
      Kaz = players[current].case.filter(K=>K==='1-3' || K==='2-2' || K==='3-1')
      Win = (Kaz.length===3)
      }
   // console.log(Win)

    if (Win)
      {
      All_bt.forEach(bt=>
        { 
        bt.disabled=true
        if ( Kaz.includes(  bt.id.slice(-3)  ))
          { bt.className='Win' }
        })
      }
  current = ++current %2
  }

btReset.onclick=_=>
  {
  current = 0
  players[0].case.length = 0
  players[1].case.length = 0
  All_bt.forEach(bt=>{ bt.disabled=false; bt.textContent = '\u00a0'; bt.className='' })
  }

#Main {
  display: block;
  --bt-size : 50px;
  width:180px;
}
#Main > button {
  display: inline-block;
  width: var(--bt-size);
  height: var(--bt-size);
  margin: 2px;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  padding: 0;
}
.Win {
  background-color: turquoise;
}
#bt-reset { margin: 1em;}

<div id="Main">
  <button id="bt-1-1">&nbsp;</button>
  <button id="bt-1-2">&nbsp;</button>
  <button id="bt-1-3">&nbsp;</button>
  <button id="bt-2-1">&nbsp;</button>
  <button id="bt-2-2">&nbsp;</button>
  <button id="bt-2-3">&nbsp;</button>
  <button id="bt-3-1">&nbsp;</button>
  <button id="bt-3-2">&nbsp;</button>
  <button id="bt-3-3">&nbsp;</button>
</div>

<button id="bt-reset">reset</button>

【讨论】：