Question

我没有使用javascript进行编程，而是来自Java背景。我试图在我的代码中使用事件处理程序，我遇到了问题。我有一个3x3表，因为我正在制作一个tic tac toe游戏，当用户点击其中一个框我想将按钮文本更改为X.所以我有我的表的html和按钮是表数据和单击相同功能时，我已经分配了所有按钮。单击一个按钮时，我将其ID发送到我的函数，并从那里尝试使用此ID参数来设置文本，但此时此刻没有发生，我有点困惑为什么不这样做。我也做了一个提示（paramID）和paramID是正确的，所以我不明白发生了什么。任何帮助将不胜感激！这可能是我做的愚蠢。我试过firefox和chrome ......

这是我的代码：

<table id="tictable" border="1" 

<tr id="row1">
<td><button id="button1" type="button" onclick="actionPerformed(this.id)"</button></td>
<td><button id="button2" type="button" onclick="actionPerformed(this.id)"</button></td>
<td><button id="button3" type="button" onclick="actionPerformed(this.id)"</button></td>
</tr>


<tr >
<td><button id="button4" type="button" onclick="actionPerformed(this.id)"</button></td>
<td><button id="button5" type="button" onclick="actionPerformed(this.id)"</button></td>
<td><button id="button6" type="button" onclick="actionPerformed(this.id)"</button></td>
</tr>


<tr id="row3">
<td><button id="button7" type="button" onclick="actionPerformed(this.id)"</button></td>
<td><button id="button8" type="button" onclick="actionPerformed(this.id)"</button></td>
<td><button id="button9" type="button" onclick="actionPerformed(this.id)"</button></td>
</tr>

</table>

<script type="text/javascript">



function actionPerformed(paramID)
{

    document.getElementById(paramID).value = "X";

}

</script>

Answer 1

您需要使用.innerHTML。

function actionPerformed(paramID)
{
    document.getElementById(paramID).innerHTML = "X";
}

演示here

最好的方法是删除所有内联JavaScript并使用此

window.onload = function () {
    var all_buttons = document.querySelectorAll('button');
    console.log(all_buttons);
    for (i = 0; i < all_buttons.length; i++) {
        all_buttons[i].addEventListener('click',function () {
            this.innerHTML = 'X';
        });
    };
};

<强> Demo

Answer 2

塞尔吉奥说了什么，加上你的所有按钮：

<button id="button1" type="button" onclick="actionPerformed(this.id)"</button>

应该是：

<button id="button1" type="button" onclick="actionPerformed(this.id)"></button>

查看缺少的>？

Answer 3

您忽略了关闭开场<table>和<button>标签。在进行函数调用时，只需在parens中传递this并在函数中拉出id。然后将按钮的内部更新为X.如果要将输出替换为X，则必须访问parentNode，然后更新父级的innerHTML

<table id="tictable" border="1">
<tr id="row1">
<td><button id="button1" type="button" onclick="actionPerformed(this)">&nbsp;</button></td>
<td><button id="button2" type="button" onclick="actionPerformed(this)">&nbsp;</button></td>
<td><button id="button3" type="button" onclick="actionPerformed(this)">&nbsp;</button></td>
</tr> 
<tr >
<td><button id="button4" type="button" onclick="actionPerformed(this)">&nbsp;</button></td>
<td><button id="button5" type="button" onclick="actionPerformed(this)">&nbsp;</button></td>
<td><button id="button6" type="button" onclick="actionPerformed(this)">&nbsp;</button></td>
</tr>
<tr id="row3">
<td><button id="button7" type="button" onclick="actionPerformed(this)">&nbsp;</button></td>
<td><button id="button8" type="button" onclick="actionPerformed(this)">&nbsp;</button></td>
<td><button id="button9" type="button" onclick="actionPerformed(this)">&nbsp;</button></td>
</tr>
</table>

    <script type="text/javascript">

    function actionPerformed(domObj)
    {
        domObj.innerHTML = "X";
    }

    </script>

我只是把它复制到了一个jsfiddle，它起作用了

更改表中按钮的文本

3 个答案: