Question

我正在研究的这个项目问一个乘法问题，并发出警报以告诉您答案是否正确。唯一的问题是，当它验证您的答案时，它做错了。代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Math Facts Game</title>
        <style>
            h1 {text-align: center; font-size:28px;}
            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() {
                var answer;
                var realanswer;
                rangeo = document.getElementById("range1").value;
                ranget = document.getElementById("range2").value;
                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 = ""; 
            
               
                one = Math.floor((Math.random() * ranget) + rangeo);
                two = Math.floor((Math.random() * ranget) + rangeo);
              
                document.getElementById("body").innerHTML = "What is " + one + " X " + two;
                var y = document.createElement("BR");
                document.body.appendChild(y);
                var input = document.createElement("INPUT");
                input.setAttribute("id", "answer");
                input.setAttribute("placeholder", "Answer");
                input.setAttribute("type", "text");
                document.body.appendChild(input); 
                var y = document.createElement("BR");
                document.body.appendChild(y);
                var btn = document.createElement("BUTTON");
                var t = document.createTextNode("Submit");
                btn.appendChild(t);
                btn.setAttribute("onclick", "go()");
                document.body.appendChild(btn);
            };
            
            function go() {
                answer = document.getElementById("answer").value;
                realanswer = rangeo + ranget;
                
                if (answer == realanswer) {
                    alert("Correct!")
                    game();
                }
                else {
                    alert("Incorrect")
                    game();
                }
                
            };
            
            
        </script>

我曾尝试与父亲进行故障排除，但他的编码水平并不高（如果您碰巧读到此，则不会冒犯父亲），但我们无法弄清楚。我知道那里有一些非常聪明的编码员，请帮助我。所有帮助表示赞赏。在此先感谢

Answer 1

您的变量rangeo和ranget实际上包含字符串，因此，当您“添加”它们时，实际上是将两个字符串连接在一起，而不是您期望的数字加法。

您可以使用例如rangeo = +document.getElementById("range1").value将该值转换为正确的数字而不是字符串（当然，其他字段也是如此）。

Answer 2

我父亲知道了。 realanswer是最小范围时间最大范围。我将其更改为第一个随机数（一个）乘以第二个随机数（两个）。现在可以使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Math Facts Game</title>
        <style>
            h1 {text-align: center; font-size:28px;}
            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() {
                var answer;
                var realanswer;
                rangeo = +document.getElementById("range1").value;
                ranget = +document.getElementById("range2").value;
                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 two;
                var z;
                setTimeout(game, 1500)   
                };
            
            function game() {
                document.getElementById("body").innerHTML = ""; 
            
               
                one = Math.floor((Math.random() * ranget) + rangeo);
                two = Math.floor((Math.random() * ranget) + rangeo);
              
                document.getElementById("body").innerHTML = "What is " + one + " X " + two;
                var y = document.createElement("BR");
                document.body.appendChild(y);
                var input = document.createElement("INPUT");
                input.setAttribute("id", "answer");
                input.setAttribute("placeholder", "Answer");
                input.setAttribute("type", "text");
                document.body.appendChild(input); 
                var y = document.createElement("BR");
                document.body.appendChild(y);
                var btn = document.createElement("BUTTON");
                var t = document.createTextNode("Submit");
                btn.appendChild(t);
                btn.setAttribute("onclick", "go()");
                document.body.appendChild(btn);
            };
            
            function go() {
            realanswer = 0;
                answer = document.getElementById("answer").value;
                realanswer = one * two;
                alert(realanswer)
                if (answer == realanswer) {
                    alert("Correct!")
                    game();
                }
                else {
                    alert("Incorrect")
                    game();
                }
                
            };
            
            
        </script>
</body>
</html>

JavaScript数学无法正确验证

2 个答案: