更改表中的按鈕的文本

我一直沒有在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。很好的捕獲。 –

更改表中的按鈕的文本

回答

相關問題