内部html不更改javascript中的按钮显示_Javascript_Innerhtml

内部html不更改javascript中的按钮显示

javascript

内部html不更改javascript中的按钮显示,javascript,innerhtml,Javascript,Innerhtml,我正在尝试更改按钮的值并将其显示在屏幕上。我正在更改内部HTML并使用getElementByID。这似乎会更改按钮的值，但不会在屏幕上显示它。我搜索并发现了类似的问题，但似乎没有一个能解决这个问题以下是HTML： <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <ti

我正在尝试更改按钮的值并将其显示在屏幕上。我正在更改内部HTML并使用getElementByID。这似乎会更改按钮的值，但不会在屏幕上显示它。我搜索并发现了类似的问题，但似乎没有一个能解决这个问题

以下是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>

正如您在实际HTML中看到的，元素根本没有自己的HTML

相反，按钮的文本来自value属性和属性。

尝试这样使用

如果使用输入标记，请使用value而不是innerHTML

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

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

})

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



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