Question

我正在构建一个tic tac toe游戏，并希望让玩家选择是X还是O.

因此，当玩家点击棋盘上的方块时，他们会使用他们刚刚点击的按钮的id来提供clickButton函数。这是电路板上第一个方块的按钮。

<input class="myButtons" type="button" id="button1" onclick="clickButton('button1')"></input>

该函数获取按钮id（param btn）并更改按钮的值。按钮的值是在文本中显示的内容，因此通过将值更改为XI来标记具有巨大X的按钮。如果第一个要去的玩家总是X，那么我可以将其设置为等于X，但我希望玩家能够选择是X还是O，所以我将它设置为变量。

function clickButton(btn, player) {
  // Add value to button.
  document.getElementById(btn).value = player;

我建了一对标有X和O的按钮。

<input type="button" id="playerX" value="X" onclick="clickButton(null,'X')"></input>
<input type="button" id="playerO" value="O" onclick="clickButton(null, 'O')"></input>

我想将player参数传递给clickButton函数。我收到一条错误消息，说我无法为按钮的值指定null值。传递一个空字符串或类似的东西会破坏我游戏的功能。

有没有办法从我的第二对按钮中只发送第二个clickButton参数？

Answer 1

所以基本上你要向你的函数发送一个空值。所以document.getelementById（null）抛出一个异常。试试这个

function clickButton(btn, player) {
  // Add value to button.
if(btn == null)
 //assign some value to player1
else
  document.getElementById(btn).value = player;
}

getElementById找不到id，因为它为null。

Answer 2

的onclick =

执行javascript函数。因此传递“null，clickbutton（'x'）”不起作用，并且永远不会起作用，它没有任何意义。（我不知道如何解释原因，这就是为什么听起来很有意思，对不起。）

如果我理解了你想要的东西，我会将正确的参数传递给你的clickButton函数。

<input type="button" id="playerX" value="X" onclick="clickButton(getElementById('playerX'), 'X')"></input>

<input type="button" id="playerO" value="O" onclick="clickButton(getElementById('playerO'), 'O')"></input>

的getElementById（ 'PlayerX的'）将搜索您刚刚创建的元素'playerX'。

或者，您可以将clickButton更改为此

function clickButton(event, player) {
  // Add value to button.
  event.target.value = player;

您必须将元素更新为

<input type="button" id="playerX" value="X" onclick="clickButton(event, 'X')"></input>

两者都是可接受的解决方案。希望有所帮助

Answer 3

您正在尝试查找元素的值，但是，您没有向该函数提供元素ID。

目前，这是hapenning：

function clickButton(null, 'X') {
  // Add value to button.
  document.getElementById(null).value = player;
}

您无法将null传递给document.getElementById()，因此错误

将代码更改为：

  <input type="button" id="playerX" value="X" onclick="clickButton(this.id,'X')"></input>
  <input type="button" id="playerO" value="O" onclick="clickButton(this.id, 'O')"></input>

Answer 4

首先，你甚至不需要Append函数，更不用说传递任何东西了。只需跟踪玩家最初选择的按钮（x或o）。

其次，不要使用内联HTML事件处理程序（onXyz = ...），因为它们会创建意大利面条代码，创建全局事件处理包装函数并修改事件处理程序中Math.trunc(2.3) // 2 Math.trunc(-2.3) // -2 Math.trunc(22222222222222222222222.3) // 2.2222222222222223e+22 Math.trunc("2.3") // 2 Math.trunc("two") // NaN Math.trunc(NaN) // NaN的值。

相反，请使用DOM标准事件模型的clickButton方法：

this

现在，当点击一个按钮时，它只会将其值更改为.addEventListener()或window.addEventListener("DOMContentLoaded", function(){ // This code will execute as soon as all the DOM elements have been parsed var player = null; var playerX = document.getElementById("playerX"); var playerO = document.getElementById("playerO"); playerX.addEventListener("click", function(){ player = this.value; }); playerX.addEventListener("click", function(){ player = this.value; }); // Wire each button up to a function that sets that button's value // to x or o accordingly. var theButtons = document.querySelectorAll(".myButtons"); for(var i = 0; i < theButtons.length; ++i){ theButtons[i].addEventListener("click", function(){ this.value = player; }); } });，具体取决于玩家选择的初始按钮。

Answer 5

我不肯定你的目标是什么。您希望您的playerX和playerO按钮覆盖当前播放器吗？像这样：

更新：我在您的其他评论中读到您只希望播放器按钮在游戏之前可用，因此我调整了我的代码以适应。

var player = 'O';
setPlayer = function(new_player){
	document.getElementById('player'+player).className = '';
  player=new_player?new_player:player=='X'?'O':'X';
  document.getElementById('player'+player).className = 'turn';
}
startGame = function(){
	document.getElementById('playerX').disabled = true;
  document.getElementById('playerO').disabled = true;
  document.getElementById('message').innerHTML = "Who's turn is it?";
  document.getElementById('board').className = '';
}
var btns = document.querySelectorAll('.myButtons');
for(var i=0;i<btns.length;i++){
	btns[i].onclick=function(e) {
    var btn = e.target;
    if(btn.value)return;
    btn.value = player;
    setPlayer();
  }
}
document.getElementById('playerX').onclick=function(){setPlayer('X');startGame()};
document.getElementById('playerO').onclick=function(){setPlayer('O');startGame()};
setPlayer('X');

.myButtons{
  min-width:2em;
  margin:0;
}
@keyframes flash {  
  50% { background-color:#9999FF; }
}
.turn{
  animation: flash 2s linear infinite;
}
.hidden{
  display:none;
}

<div id='board' class='hidden'>
  <input class="myButtons" type="button" id="button1" />
  <input class="myButtons" type="button" id="button2" />
  <input class="myButtons" type="button" id="button3" /><br>
  <input class="myButtons" type="button" id="button4" />
  <input class="myButtons" type="button" id="button5" />
  <input class="myButtons" type="button" id="button6" /><br>
  <input class="myButtons" type="button" id="button7" />
  <input class="myButtons" type="button" id="button8" />
  <input class="myButtons" type="button" id="button9" /><br><br>
</div>
<div id='player_select'>
  <div id='message'>Who do you want to be?</div>
  <input type="button" id="playerX" value="X" />
  <input type="button" id="playerO" value="O" />
</div>

如何使用Javascript将不同来源的两个参数传递给函数？

5 个答案: