The functions aren't cooperating :/

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>

The first function throws two random numbers and the second one should check if the input form person is correct but "document.getElementById("demoX").value" returns nothing ... I was trying check values with console.log but it returns like nothing is define.

I was just trying to merge two functions from w3schools but it took me so much time. :/

Answer 1

Solved and nicer code.

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

Answer 2

Your problem is four-fold. One:

document.getElementById("demoX").value

does not return anything. A <span> element has no value. It has an innerHTML, just what you used to set it.

---

Two:

if (b == E + D) {

E and D will be strings. The result of adding two strings is a combined string.

"4" + "3" is not "7", it is "43".

You want to convert them to numbers first. Among other things, an unary + can do that. Try:

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

---

Three: You want to reset the form after you read out all values, not before.

---

Four: What's all that business creating all those fixed input fields and buttons dynamically via innerHTML anyway? Just put them into the HTML directly and let them sit there.

---

So...

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>