内部 html 未更改 javascript 中的按钮显示
inner html not changing button display in javascript
我正在尝试更改按钮的值并将其显示在屏幕上。我正在更改内部 HTML 并使用 getElementByID。这似乎改变了按钮的值,但没有显示在屏幕上。我搜索并发现了类似的问题,但 none 似乎可以解决这个问题。
这是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";
})
正如您在实际 HTML 中看到的那样,<input>
元素根本没有自己的 HTML。
相反,按钮的文本来自 value
属性 & 属性。
尝试这样使用demo
<input type="button" id= "buttonOne" class= "gameBoardSquare" value="">
<script type="text/javascript">
var elem = document.getElementById("buttonOne");
elem.value = "button text";
</script>
我正在尝试更改按钮的值并将其显示在屏幕上。我正在更改内部 HTML 并使用 getElementByID。这似乎改变了按钮的值,但没有显示在屏幕上。我搜索并发现了类似的问题,但 none 似乎可以解决这个问题。
这是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";
})
正如您在实际 HTML 中看到的那样,<input>
元素根本没有自己的 HTML。
相反,按钮的文本来自 value
属性 & 属性。
尝试这样使用demo
<input type="button" id= "buttonOne" class= "gameBoardSquare" value="">
<script type="text/javascript">
var elem = document.getElementById("buttonOne");
elem.value = "button text";
</script>