Question

function myFunction() {
    var x = Math.floor((Math.random() * 10) + 1);
    document.getElementById("demoX").innerHTML = x;

    var y = Math.floor((Math.random() * 10) + 1);
    document.getElementById("demoY").innerHTML = y;

    document.getElementById("demoP").innerHTML = " + ";

    document.getElementById("equal").innerHTML = " = ";

    document.getElementById("input").innerHTML = "<input id=>";    

    document.getElementById("check").innerHTML = "<button>Check</button>";

}

function myBunction() {
    myFunction();
    var b, text;

    // Get the value of the input field with id="numb"
    b = document.getElementById("input").value;

    var D = document.getElementById("demoX").value;
     var E = document.getElementById("demoY").value;
    // If x is Not a Number or less than one or greater than 10
    if (b == E + D) {
        text = "Input is ok";
    } else {
        text = "Input not valid";
    }
    document.getElementById("demo").innerHTML = text;
}

<p>Click the button to display a random number between 1 and 10.</p>

<button onclick="myFunction()">Try it</button>

<br> <br>

<span id="demoX"></span>
<span id="demoP"></span>
<span id="demoY"></span>

<span id=equal></span>
<span id=input></span> 
<span onclick="myBunction()" id=check></span>

<p id="demo"></p>

第一个函数抛出两个随机数，第二个函数应该检查输入表单人是否正确，但是“document.getElementById（”demoX“）。value”什么都不返回...我正在尝试使用console.log检查值但它返回就像没有定义。

我只想尝试合并w3schools的两个功能，但这花了我很多时间。：/

Answer 1

你的问题是四方面的。之一：

document.getElementById("demoX").value

不会返回任何内容。 <span>元素没有value。它有一个innerHTML，就像你用来设置它一样。

二：

if (b == E + D) {

E和D将成为字符串。添加两个字符串的结果是组合字符串。

"4" + "3"不是"7"，而是"43"。

您想先将它们转换为数字。除其他外，一元+可以做到这一点。尝试：

b = +b;
D = +D;
E = +E;
if (b == E + D) {

三：您希望在之后重置表单，而不是之前读取所有值。

四：无论如何，通过innerHTML动态创建所有固定输入字段和按钮的业务是什么？只需将它们直接放入HTML中，让它们就坐在那里。

因此...

＆＃13;
＆＃13;
function reset() { var x = Math.floor((Math.random() * 10) + 1); document.getElementById("demoX").innerHTML = x; var y = Math.floor((Math.random() * 10) + 1); document.getElementById("demoY").innerHTML = y; document.getElementById("input").value = ""; document.getElementById("demoP").innerHTML = " + "; document.getElementById("equal").innerHTML = " = "; } function check() { var b, D, E, text; // Get the value of the input field with id="numb" b = +document.getElementById("input").value; D = +document.getElementById("demoX").innerHTML; E = +document.getElementById("demoY").innerHTML; if (b == E + D) { text = "Input is ok"; } else { text = "Input not valid"; } document.getElementById("demo").innerHTML = text; reset(); } reset();
＆＃13;
<p>Click the button to display a random number between 1 and 10.</p> <span id="demoX"></span> <span id="demoP"></span> <span id="demoY"></span> <span id="equal"></span> <input id="input"> <button onclick="check()">Check</button> <p id="demo"></p>
＆＃13;
＆＃13;
＆＃13;

Answer 2

解决了更好的代码。

测试

<script>

    //=====|Generate the problem|=====//

    function myGenerator() {

        var x = Math.floor((Math.random() * 100) + 1);
        document.getElementById("demoX").innerHTML = x;

        var y = Math.floor((Math.random() * 100) + 1);
        document.getElementById("demoY").innerHTML = y;


        document.getElementById("demoP").innerHTML = " + ";

        document.getElementById("equal").innerHTML = " = ";

        document.getElementById("numbs").innerHTML = "<input id=numb>";

        document.getElementById("check").innerHTML = "<button>Check</button>";

    }

    //=====|Check the given solution|=====//

    function myChecker() {

        var a, text;

        a = document.getElementById("numb").value;

        var b = parseFloat(document.getElementById("demoX").textContent);

        var c = parseFloat(document.getElementById("demoY").textContent);

        //=====|Simple if|=====//

        if (a == b + c) {
            alert("Congratulation");
            text = "Right";
        } else {
            alert("Maybe next time");
            text = "Wrong";
        }
        document.getElementById("demo").innerHTML = text;

        //=====|Just for control|=====//
        console.log(a);
        console.log(b);
        console.log(c);

    }
</script>

<h1>Click to start</h1>

<button onclick="myGenerator()">Try it</button>

<br>
<br>

<!--=====|Hidden Stuff|=====//-->
<span id="demoX"></span>
<span id="demoP"></span>
<span id="demoY"></span>
<span id="equal"></span>

<span onclick="myChecker()" id=check></span>
<span id="numbs"></span>
<!--=====|Response|=====//-->
<p id="demo">

功能不合作：/

2 个答案: