点击后如何更改按钮的值？

时间：2019-12-20 02:00:45

标签： javascript html css

在课堂上，我正在做一个井字游戏，被困了2天，试图使x和o出现，并且作业应在明天到期！ 这是作业表：

COMPSCI20：井字游戏分配

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

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

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

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

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

  • 一个Start()函数，用于将玩家的回合设置为X，而获胜者为空
  • 一个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>

2 个答案:

答案 0 :(得分：0)

if (document.getElementById("button1").onclick)不是测试他们是否单击button1的方法。那只是测试onclick属性是否包含任何东西，因为它包含onclick="ChooseSquare()"属性的值，所以它之所以这么做。

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

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

在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>

答案 1 :(得分：0)

我无法抗拒... 

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>

相关问题
最新问题