javascript - 单击时如何更改按钮的值？

问题描述

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

COMPSCI20：井字游戏作业

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

页面标题和指向 CSS 文件的链接
包含文本的标题分区（带有 ID）
一个包含可点击按钮的 3x3 表的主分区（带有 ID）（带有一个类，每个都有 ID）
包含文本标题 + 链接  主 + 表  标题  页脚 </li> 的页脚分区（带有 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>

标签： javascripthtmlcss

解决方案

我无法抗拒...

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>

javascript - 单击时如何更改按钮的值？

问题描述

解决方案

推荐阅读