2015-11-29 51 views
0

我試圖改變一個按鈕的值,並將其顯示在屏幕上。我正在更改內部HTML並使用getElementByID。這似乎改變了按鈕的值,但不顯示在屏幕上。我搜索並發現了類似的問題,但似乎沒有解決這個問題。內部HTML不改變按鈕顯示在javascript

這裏的HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
     <title>Noughts and Crosses</title> 
    </head> 

    <body> 

     <p id="message">Click a square</p> 

     <ul class="gameBoard"> 
      <ul class="rowOne"> 
      <input type="button" id= "buttonOne" class= "gameBoardSquare" value=""><!-- 
      --><input type="button" id="buttonTwo" class= "gameBoardSquare" value=""><!-- 
      --><input type="button" id="buttonThree" class= "gameBoardSquare" value=""> 
      </ul> 
      <ul class="rowTwo"> 
      <input type="button" id="buttonFour" class= "gameBoardSquare" value=""><!-- 
      --><input type="button" id="buttonFive" class= "gameBoardSquare" value=""><!-- 
      --><input type="button" id="buttonSix" class= "gameBoardSquare" value=""> 
      </ul> 
      <ul class="rowThree"> 
      <input type="button" id="buttonSeven" class= "gameBoardSquare" value=""><!-- 
      --><input type="button" id="buttonEight" class= "gameBoardSquare" value=""><!-- 
      --><input type="button" id="buttonNine" class= "gameBoardSquare "value=""> 
      </ul> 
     </ul> 

     <div> 
      <input type="button" id="buttonReset" value="RESET"> 
     </div> 

<script src="js/tictactoe.js"></script> 

    </body> 

</html> 

和JavaScript:

document.addEventListener("click", function() { 

    document.getElementById("buttonOne").innerHTML = "X"; 

}) 
+0

如果您使用的輸入標籤使用'value',而不是'innerHTML' – jcubic

回答

0

正如你可以在你的實際的HTML看到,<input>元素沒有自己的HTML可言。

而是,該按鈕的文本來自value屬性&屬性。

0

嘗試使用這樣demo

<input type="button" id= "buttonOne" class= "gameBoardSquare" value=""> 



<script type="text/javascript"> 
    var elem = document.getElementById("buttonOne"); 
    elem.value = "button text"; 
</script>