Question

我制作了一个摇滚，纸张，剪刀游戏，并且在程序中，我有一个按钮应该出现，但它永远不会，它一直给我一个错误，上面写着“Uncaught TypeError：无法读取属性'样式'空值”。如果我删除了最后一个“if”语句，它会显示出来，但在点击一次之后就会消失。

<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>

Answer 1

document.write将覆盖整个DOM，因此初始化onload的按钮实际上会被document.write的内容覆盖。

但是，如果您不希望自己的内容消失，我建议您使用div代替document.getElementById("div_id").innerHTML命令创建新document.write()以保存按钮。

Answer 2

当您使用document.write时，它将通过覆盖所有DOM元素来显示其内容。

因此，您需要使用innerHtml来显示保持DOM活动的内容。

在document.write之后按钮不显示

2 个答案: