更改表中的按钮的文本

我一直没有在JavaScript中编程，并且来自Java背景。我正在尝试在我的代码中使用事件处理程序，并且遇到问题。我有一个3x3表，因为我正在制作一个tic tac脚趾游戏，当用户点击其中一个框时，我想将按钮文本更改为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>

来源

2013-10-04 Tastybrownies

你没有关闭你的开幕 –

您需要使用.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

来源

2013-10-04 16:59:58 Sergio

我刚刚试过了，它没有改变按钮的文本。我不知道为什么。它确实看起来正确。 – Tastybrownies

@Tastybrownies，它在演示上点击按钮。请记住，按钮没有内容，因此它们很小。 – Sergio

非常感谢。我知道这是一件小事。我的胖手指和HTML标签不是一个好的组合。再次感谢你。现在起作用了。 – Tastybrownies

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

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

应该是：

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

查看丢失>？

来源

2013-10-04 17:04:45 Andy

您忽略了关闭您的开头<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和它的工作

来源

2013-10-04 17:12:50

当你传入dom对象时，不需要使用getElementById来获取它。 –

true true。很好的捕获。 –

更改表中的按钮的文本

回答

相关问题