功能不配合:/

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>

​

第一个函数抛出两个随机数，第二个函数应该检查输入表单person是否正确，但是"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中，让它们坐在那里即可。

所以..。

​

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();

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

​

Answer 2

破译更好的密码。

 Test

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

​