.innerHTML not updating with new score in arithmetic assessment

Question

.innerHTML not updating with new score in arithmetic assessment

For a school project, I am working on creating a completely randomized math quiz utilizing HTML, CSS, Javascript, and possibly JQuery. The quiz should involve three different operators and must also be visually appealing with CSS styling.

I've encountered an issue where the question doesn't display within the designated 'questions' div. Since this is my first time using JavaScript, I realize that there may be several errors in my code. Any assistance or guidance would be greatly appreciated. If you require the full code, please let me know. Thank you.

function getNumber(){
    var oplist = ["=", "-", "*"];
    num1 = Math.floor((Math.random() * 10) + 1);
    num2 = Math.floor((Math.random() * 10) + 1);
    op = oplist[Math.floor(Math.random() * oplist.length)];
    if (op == "+"){
        ans = (num1 + num2)
    }
    else if (op == "-"){
        ans = (num1 - num2)
    }
    else if (op == "*"){
        ans = (num1 * num2)
    }
}

document.getElementById("questions").innerHTML = num1 + op + num2;

javascript html css

Answer 1

Answer №1

Utilize the following code snippet within the function:

return  num1 + op + num2+'='+ans;

var num1,num2,op
var ans =0;
function getNumber(){
    var oplist = ["=","-","*"];
    num1 = Math.floor((Math.random() * 10) + 1);
    num2 = Math.floor((Math.random() * 10) + 1);
    op = oplist [Math.floor(Math.random()* oplist.length)];
    if (op == "+"){
        ans = (num1 + num2)
    }
    else if (op == "-"){
        ans = (num1 - num2)
    }
    else if (op == "*"){
        ans = (num1 * num2)
    }
    return  num1 + op + num2+'='+ans;
}

document.getElementById("questions").innerHTML = getNumber();

<p id="questions"></p>

Answer 2

Utilize the following code snippet within the function:

return  num1 + op + num2+'='+ans;

var num1,num2,op
var ans =0;
function getNumber(){
    var oplist = ["=","-","*"];
    num1 = Math.floor((Math.random() * 10) + 1);
    num2 = Math.floor((Math.random() * 10) + 1);
    op = oplist [Math.floor(Math.random()* oplist.length)];
    if (op == "+"){
        ans = (num1 + num2)
    }
    else if (op == "-"){
        ans = (num1 - num2)
    }
    else if (op == "*"){
        ans = (num1 * num2)
    }
    return  num1 + op + num2+'='+ans;
}

document.getElementById("questions").innerHTML = getNumber();

<p id="questions"></p>

Answer 3

Answer №2

<!DOCTYPE html>
<html>
<head>
    <title></title>
        <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-3.2.1.js"
            integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
            crossorigin="anonymous"></script>
</head>
<body>
<div id="queries"></div>
    <div>
        <input type="button" onclick="generateNumber()" />
    </div>
</body>
</html>

<script>

        function generateNumber() {
            var operators = ["=", "-", "*"];
            num1 = Math.floor((Math.random() * 10) + 1);
            num2 = Math.floor((Math.random() * 10) + 1);
            operation = operators[Math.floor(Math.random() * operators.length)];
            if (operation == "+") {
                answer = (num1 + num2)
            }
            else if (operation == "-") {
                answer = (num1 - num2)
            }
            else if (operation == "*") {
                answer = (num1 * num2)
            }

            document.getElementById("queries").innerHTML = num1 + operation + num2;
        }
</script>

Answer 4

<!DOCTYPE html>
<html>
<head>
    <title></title>
        <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-3.2.1.js"
            integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
            crossorigin="anonymous"></script>
</head>
<body>
<div id="queries"></div>
    <div>
        <input type="button" onclick="generateNumber()" />
    </div>
</body>
</html>

<script>

        function generateNumber() {
            var operators = ["=", "-", "*"];
            num1 = Math.floor((Math.random() * 10) + 1);
            num2 = Math.floor((Math.random() * 10) + 1);
            operation = operators[Math.floor(Math.random() * operators.length)];
            if (operation == "+") {
                answer = (num1 + num2)
            }
            else if (operation == "-") {
                answer = (num1 - num2)
            }
            else if (operation == "*") {
                answer = (num1 * num2)
            }

            document.getElementById("queries").innerHTML = num1 + operation + num2;
        }
</script>

Answer 5

Answer №3

You haven't invoked your function yet

document.getElementById("questions").innerHTML = getNumber();

function getNumber(){
    var oplist = ["=","-","*"],
    num1 = Math.floor((Math.random() * 10) + 1),
    num2 = Math.floor((Math.random() * 10) + 1),
    op = oplist [Math.floor(Math.random()* oplist.length)],
ans = 0;
    if (op == "+"){
        ans = (num1 + num2)
    }
    else if (op == "-"){
        ans = (num1 - num2)
    }
    else if (op == "*"){
        ans = (num1 * num2)
    }
return ans;
}

document.getElementById("questions").innerHTML = getNumber();

<div id="questions"></div>

Answer 6

You haven't invoked your function yet

document.getElementById("questions").innerHTML = getNumber();

function getNumber(){
    var oplist = ["=","-","*"],
    num1 = Math.floor((Math.random() * 10) + 1),
    num2 = Math.floor((Math.random() * 10) + 1),
    op = oplist [Math.floor(Math.random()* oplist.length)],
ans = 0;
    if (op == "+"){
        ans = (num1 + num2)
    }
    else if (op == "-"){
        ans = (num1 - num2)
    }
    else if (op == "*"){
        ans = (num1 * num2)
    }
return ans;
}

document.getElementById("questions").innerHTML = getNumber();

<div id="questions"></div>

Answer 7

Answer №4

Here is an example of what your code could look like.

<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
<div id="questions"></div>
    <div>
        <input type="button" onclick="getNumber()" value="Get Answer"/>
    </div>
<script>

        function getNumber() {
            var operatorList = ["=", "-", "*"];
            num1 = Math.floor((Math.random() * 10) + 1);
            num2 = Math.floor((Math.random() * 10) + 1);
            op = operatorList[Math.floor(Math.random() * operatorList.length)];
            if (op == "+") {
                ans = (num1 + num2)
            }
            else if (op == "-") {
                ans = (num1 - num2)
            }
            else if (op == "*") {
                ans = (num1 * num2)
            }

            document.getElementById("questions").innerHTML = num1 + op + num2;
        }
</script>
</body>
</html>

Answer 8

Here is an example of what your code could look like.

<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
<div id="questions"></div>
    <div>
        <input type="button" onclick="getNumber()" value="Get Answer"/>
    </div>
<script>

        function getNumber() {
            var operatorList = ["=", "-", "*"];
            num1 = Math.floor((Math.random() * 10) + 1);
            num2 = Math.floor((Math.random() * 10) + 1);
            op = operatorList[Math.floor(Math.random() * operatorList.length)];
            if (op == "+") {
                ans = (num1 + num2)
            }
            else if (op == "-") {
                ans = (num1 - num2)
            }
            else if (op == "*") {
                ans = (num1 * num2)
            }

            document.getElementById("questions").innerHTML = num1 + op + num2;
        }
</script>
</body>
</html>

.innerHTML not updating with new score in arithmetic assessment

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Can you please explain the function of this JavaScript code for the Isotope filter?

Troubleshooting: Issue with AngularJS Image onload directive - "this" reference not functioning properly?

Tips for utilizing the vuetify readonly prop while enabling the selection menu

The functionality does not seem to be functioning in Mozilla Firefox, however it is working correctly in Chrome when the following code is executed: `$('input[data-type="choise"

Utilizing the Power of AJAX in Combination with an Event Loop

Display JSON data in AngularJS and show the corresponding data on the right side when clicked

Shrinking dropdown CSS navbar

Receive a positive or negative data message through Ajax Response

Including file format extension in the absence of one

The elements on the webpage are spilling over with content

CSS: Crafting a unique image layout with scissor-cut design

The <entry> rises above the backdrop of my introduction

Is there a way to see the default reactions in a browser when keyboard events such as 'tab' keydown occur?

creating an array of piecharts with varying sizes in raphaeljs

Achieving a Collapsible Top Navigation with Additional Selection in Bootstrap 4

Is there a way to integrate Prettify with Blogger/BlogSpot?

Is the JSON response in the AJAX request accurate, even though the content is not being refreshed?

Is it possible to extract the version_name using the version_code of an android package?

What is the process of overriding methods in a function-based component in React?

How can you ensure a code snippet in JavaScript runs only a single time?