在document.write之后按钮不显示 [英] Button doesn't show after document.write
问题描述
我做了一个石头,纸,剪刀的游戏,并且在程序中,我有一个应该可以按下的按钮,但是它从没有按下,它一直给我一个错误,说:"Uncaught TypeError:Can not read property'style'of空值".而且,如果我摆脱了最后一个"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
并使用 document.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屋!