更改表格中按钮的文本

Changing the Text of a Button in a Table

本文关键字：文本 按钮 表格      更新时间：2023-09-26

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

这是我的代码：

<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';
        });
    };
};

演示

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

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

应该是：

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

看到缺失的>了吗？

您忽略了关闭开头<table>并<button>标签。 进行函数调用时，只需在括号中传递 this 并在函数中拉出 ID。 然后将按钮的内部更新为 X。 如果你想把 out 换成一个 X，你必须访问 parentNode，然后更新 parent 的 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 中，它有效

相关文章：