井字游戏的Javascript对象 [英] Javascript Object for Tic Tac Toe game
问题描述
在Javascript主题上，在此处填写新手.我在尝试使用JS'Objects节省代码空间时，编写一个Tic Tac Toe游戏.我以为我可以创建一个JS对象，该对象将在HTML代码中定义的所有9个字段的ID为"one"到"nine"作为值，然后还有一个自定义方法，可用于按以下方式交换值的textContent:
Complete newbie here on the Javascript topic. I am trying to code out a Tic Tac Toe game, while using JS' Objects to save code space. I figured I might create a JS Object which will all 9 fields defined in the HTML code with ids 'one' to 'nine' as values, and then also have a custom method which can be used to swap value's textContent as follows:
var fields = {
one: document.querySelector('#one'),
two: document.querySelector('#two'),
three: document.querySelector('#three'),
four: document.querySelector('#four'),
five: document.querySelector('#five'),
six: document.querySelector('#six'),
seven: document.querySelector('#seven'),
eight: document.querySelector('#eight'),
nine: document.querySelector('#nine'),
swap: function(element) {
if (this.element.textContent === "") {
this.element.textContent = "X";
} else if (this.element.textContent === "X") {
this.element.textContent = "O";
} else {
this.element.textContent = "";
}
}
}
然后，我想我会像这样添加一堆addEventListeners:
Then, I figured I would just add a bunch of addEventListeners like so:
fields['one'].addEventListener('click', fields.swap(fields['one']));
问题是，我可能会完全像在Python中那样对待这个概念，并且可能在这里弄乱了语法.谁能给我一些关于我在哪里出错的想法?
The thing is, I am probably totally treating this concept as it would operate in Python, and I am probably messing up the syntax here. Can anyone give me some ideas on where I am making an error?
上面复制的代码目前无法正常工作.
The code copied above does not work at the moment.
它可以使用的HTML如下(为了节省空间，这里省略了格式化):
HTML that it works with is as follows (I have omitted formatting here to save on space):
<body>
<div class="container">
<table id="gameboard">
<tr class="row">
<td id="one" class="gameField">X</td>
<td id="two" class="gameField">X</td>
<td id="three" class="gameField">X</td>
</tr>
<tr class="row">
<td id="four" class="gameField">X</td>
<td id="five" class="gameField">X</td>
<td id="six" class="gameField">X</td>
</tr>
<tr class="row">
<td id="seven" class="gameField">X</td>
<td id="eight" class="gameField">X</td>
<td id="nine" class="gameField">X</td>
</tr>
</table>
</div>
推荐答案
将您的 swap 功能从您的对象中分离出来，然后一起摆脱该对象.向要向其中添加EventListener的所有HTMLElement添加 class ，然后使用以下命令对所有HTMLElement进行查询:
Separate you swap function out of your object and just get rid of the object all together. Add a class to all of the HTMLElements you wish to add an EventListener to and then query them all using the following:
<div id="one" class="your-class"></div>
<div id="two" class="your-class"></div>
function swap(element) {
if (element.textContent === ""){
element.textContent = "X";
}else if (element.textContent === "X") {
element.textContent = "O";
}else {
element.textContent = "";
}
}
document.querySelectorAll('.your-class').forEach(function (element) {
element.addEventListener('click', swap(element));
});
这篇关于井字游戏的Javascript对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
