Javascript 更改表中按钮的文本

我还没有用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>

---

您需要使用.innerHTML

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

演示

最好的方法是删除所有内联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';
        });
    };
};

window.onload=函数（）{
var all_buttons=document.queryselectoral（'button'）；
控制台日志（所有按钮）；
对于（i=0；i

您需要使用.innerHTML

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

演示

最好的方法是删除所有内联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';
        });
    };
};

window.onload=函数（）{
var all_buttons=document.queryselectoral（'button'）；
控制台日志（所有按钮）；
对于（i=0；i

塞尔吉奥说的话，以及你所有的按钮：

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

？
塞尔吉奥说的话，以及你所有的按钮：

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

？
您忽略了关闭打开的
和
标签。进行函数调用时，只需在parens中传递
this
，并在函数中拉出id。然后将按钮的内部更新为X。如果要将其替换为X，则必须访问父节点，然后更新父节点的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>


已执行的功能操作（domObj）
{
domObj.innerHTML=“X”；
}

我刚刚把它复制到一个JSFIDLE中，它工作了
您忽略了关闭打开的
和
标记。进行函数调用时，只需在parens中传递
this
，并在函数中拉出id。然后将按钮的内部更新为X。如果要将其替换为X，则必须访问父节点，然后更新父节点的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>


已执行的功能操作（domObj）
{
domObj.innerHTML=“X”；
}

我只是把它复制到一个JSFIDLE中，它工作了
我只是尝试了一下，它没有改变按钮的文本。我不知道为什么。它看起来确实正确。@Tastybrownies，它可以在演示中单击按钮。请记住，按钮没有内容，所以它们很小。非常感谢。我就知道是这么小的东西。我的胖手指和HTML标签不是很好的组合。再次感谢你。现在可以用了。@Tastybrownies，很高兴我能帮上忙！您可以单击以接受答案。顺便说一句，看看我的第二个演示，这是更好的实践。我只是尝试了一下，它没有改变按钮的文本。我不知道为什么。它看起来确实正确。@Tastybrownies，它可以在演示中单击按钮。请记住，按钮没有内容，所以它们很小。非常感谢。我就知道是这么小的东西。我的胖手指和HTML标签不是很好的组合。再次感谢你。现在可以用了。@Tastybrownies，很高兴我能帮上忙！您可以单击以接受答案。顺便说一句，看看我的第二个演示，这是更好的练习。你没有结束你的开场白。而且您的标签中没有文本。这里的文字你没有关闭你的开始标签。而且您的标签中没有文本。此处的文本当您传入dom对象时，无需使用getElementById.true再次获取它。很好的捕获。当您传入dom对象时，不需要使用getElementById.true再次获取它。接得好。