Question

我正在尝试使用html和javascript进行简单的tic tac toe游戏，其中点击了一个按钮，该按钮的值变为＆＃34; x＆＃34;，但是当我点击它时，没有任何反应。

<!doctype html>
<html>
<head>
<style>
</style>
<script>
function tic(a) {
document.getElementById(a).value = "x";
}
</script>
</head>
<body>
<center>
Tic-Tac-Toe
</center>
<center>
<table>
    <tr>
        <td>
            <input value=" " name="aa" type="button" onClick="tic("aa")">
        </td>
        <td>
            <input value=" " name="ab" type="button" onClick="tic("ab")">
        </td>
    <tr>
</table>
</center>
</body>
</html>

Answer 1

你注意到这里有什么奇怪的事吗？

onClick="tic("aa")"

看一下引号。您的属性值实际上是

onClick="tic("

这是无效的JavaScript。在值内使用不同的引号：

onClick="tic('aa')"

另一个问题是没有ID为aa或ab的元素，因此document.getElementById(a)将返回null。如果您打算引用按钮，您可以为它们提供ID，或者只是将元素本身直接传递给函数：

<script>
function tic(element) {
   element.value = "x";
}
</script>

<input value=" " name="aa" type="button" onClick="tic(this)">

我建议您阅读these articles以了解有关事件处理的更多信息，并about DOM。

Answer 2

function tic(a) {
    a.value = "x";
};

然后：

<input value=" " name="aa" id="aa" type="button" onclick="tic(this);">

Answer 3

onClick="tic("aa")"应该是：

onClick="tic('aa')"
             ^--^-----------single quotes so you don't need to escape them

此外，您应该使用ID而不是名称，因为您使用的是getElementById：

        <td> 
            <input value=" " id="aa" type="button" onClick="tic('aa')">
        </td>
        <td>
            <input value=" " id="ab" type="button" onClick="tic('ab')">
        </td>

另一种选择是将this作为参数传递，然后在函数中修改其值。

像：

function tic(el) {
   el.value = "x";
}

传递this：

tic(this)

Answer 4

现在应该可以了。您的功能正在调用document.getElementById()但您只有name=设置＆amp;不是id=。所以我为id=按钮设置了<input>个值。同时将onClick值调整为值的单引号和函数调用后的;。

<!doctype html>
<html>
<head>
<style>
</style>
<script>
function tic(a) {
document.getElementById(a).value = "x";
}
</script>
</head>
<body>
<center>
Tic-Tac-Toe
</center>
<center>
<table>
    <tr>
        <td>
            <input value=" " name="aa" id="aa" type="button" onClick="tic('aa');">
        </td>
        <td>
            <input value=" " name="ab" id="ab" type="button" onClick="tic('ab');">
        </td>
    <tr>
</table>
</center>
</body>
</html>

我试图用html和javascript做一个简单的tic tac toe游戏

4 个答案: