2015-11-29 1 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>