document.write后按钮不显示 [英] Button doesn't show after document.write
问题描述
我做了一个石头，纸，剪刀的游戏，并且在程序中，我有一个应该弹出的按钮，但是它从不弹出，它一直给我一个错误，说：未捕获的TypeError：无法读取属性的'style'空值。而且，如果我摆脱了最后一个 if语句，它会显示出来，但在单击一次后消失。
I made a rock, paper, scissors game and in the program, I have a button that should come up but it never does, It keeps giving me an error that says, "Uncaught TypeError: Cannot read property 'style' of null". And if I get rid of the last "if" statement, it shows up but then disappears after it is clicked once.
<html>
<head>
<title> Rock, paper, scissors game</title>
<script>
function game(){
var userChoice= prompt("Do you choose rock, paper, or scissors?");
document.write("You chose " + userChoice + ". <br/>")
var computerChoice= Math.random();
if(computerChoice<=0.33){
computerChoice="rock";
}
else if(computerChoice<=0.67){
computerChoice="paper";
}
else{
computerChoice="scissors";
}
document.write("The computer chose " + computerChoice + ". <br/>");
if(userChoice==computerChoice){
document.write("TIE!!!!");
}
if(userChoice=="paper" && computerChoice=="rock"){
document.write('<p style="color:red">You win!</p>');
}
if(userChoice=="rock" && computerChoice=="scissors"){
document.write('<p style="color:red">You win!</p>');
}
if(userChoice=="scissors" && computerChoice=="paper"){
document.write('<p style="color:red">You win!</p>');
}
if(userChoice=="scissors" && computerChoice=="rock"){
document.write('Sorry, you lose.');
}
if(userChoice=="rock" && computerChoice=="paper"){
document.write("Sorry, you lose.");
}
if(userChoice=="paper" && computerChoice=="scissors"){
document.write("Sorry, you lose.");
}
if(userChoice=="Chuck Norris"){
document.write("This program bows down to your superiority, YOU WIN!!!!");
}
if(document.getElementById("buttonclick").style.display == "none"){
document.getElementById("buttonclick").style.display = "block";
}
}
</script>
</head>
<body onload="game()">
<button type="button" style="display:none;" id="buttonclick" onclick="game()">Play Again!</button>
</body>
</html>
推荐答案
document.write 将覆盖您的整个DOM，因此您初始化的onload按钮实际上将被您的 document.write 的内容覆盖。
The document.write will overwrite your entire DOM, so the button you initialized onload will actually be overwritten by the contents of your document.write.
但是，如果您不希望内容消失，建议创建一个新的 div 并使用文档。使用getElementById（ div_id）。innerHTML 代替您的 document.write（）命令来保存按钮。
However, if you do not want your content to disappear, I suggest making a new div and using document.getElementById("div_id").innerHTML in place of your document.write() commands in order to save the button.
这篇关于document.write后按钮不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
