document.getElementById没有写我告诉它要做什么

时间:2018-06-28 10:47:44

标签: javascript html dom

对不起,如果重复的话。

由于某种原因,我的JavaScript无法运行或有效。也许是HTML。这是代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Math Facts Game</title>
        <style>
            h1 {text-align: center; font-size:28px;}
            button {font-size:27px;}
            h2 {color: green; text-align: center;}
            body {text-align: center;}
        </style>
        
    </head>
    <body id="body">
        <h1>Welcome to</h1><a href="https://www.khanacademy.org/profile/Ethanlovessnakes/">epthesnakelover's</a><h1> math fact game!</h1>
        <h2 id="loading-bar"></h2>
        <br>
        Range: <input id="range1"> to <input id="range2">
        <br>
        <br>
            <button onclick="startgame()">Start</button>
        
        <div id="loader-container">
        </div>
        <script>
            function startgame() {
            document.getElementById("body").innerHTML = "Loading";
            var y = document.createElement("BR");
            document.body.appendChild(y);
            var x = document.createElement("IMG");
            x.setAttribute("src", "https://upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif");
            x.setAttribute("width", "10%");
            x.setAttribute("height", "10%");
            x.setAttribute("alt", "Loader");
            document.body.appendChild(x);
            var one;
            var z;
            setTimeout(game, 3000)   
            };
            
            function game() {
             document.getElementById("body").innerHTML = "";   
            rangeo = document.getElementById("range1").value;
            ranget = document.getElementById("range2").value;
            
               
               one = Math.floor((Math.random() * ranget) + rangeo);
               two = Math.floor((Math.random() * ranget) + rangeo);
              
            document.getElementById("body").innerHTML = "What is" + one + "X" + two;
                
            };
        </script>
    </body>
</html>

我不知道为什么这不能改变innerHTML。请帮忙,一切都会感激的!

谢谢!

1 个答案:

答案 0 :(得分:1)

执行document.getElementById("range1")时,输入消失了,因为您已经用"Loading"替换了正文中的所有HTML。在此之前获取输入的值,或者隐藏它们而不是删除它们。