Javascript number game not showing output

Javascript number game not showing output - javascript

I have been trying to make a game in Javascript where the browser generates 2 random numbers and an operand by clicking a button and the user has to type in the answer of the displayed calculation in an input area. If the answer is correct, the browser displays an alert saying that it is correct. Everything works fine, the numbers and operands are getting displayed, the user is able to type in his answer, but I am not getting any alert from the browser.
Here is the HTML and Javascript code (I haven't applied any style to it yet).
function displayOperation() {
let num1 = Math.floor(Math.random() * 100) + 1;
let num2 = Math.floor(Math.random() * 100) + 1;
let operandArr = ["+", "-", "*"];
let randomOperand = operandArr[Math.floor(Math.random() * operandArr.length)];
document.getElementById("number_one").innerHTML = num1;
document.getElementById("number_two").innerHTML = num2;
document.getElementById("operand_type").innerHTML = randomOperand;
switch (randomOperand) {
case "+":
add();
break;
case "-":
subtract();
break;
case "*":
multiply();
break;
}
function add() {
let res = num1 + num2;
let userAnswer = document.getElementById("text_Area").value;
document.getElementById("calculate").addEventListener("click", function () {
if (userAnswer === res) {
alert("correct!");
window.location.reload();
}
});
}
function subtract() {
let res = num1 - num2;
let userAnswer = document.getElementById("text_Area").value;
document.getElementById("calculate").addEventListener("click", function () {
if (userAnswer === res) {
alert("correct!");
window.location.reload();
}
});
}
function multiply() {
let res = num1 * num2;
let userAnswer = document.getElementById("text_Area").value;
document.getElementById("calculate").addEventListener("click", function () {
if (userAnswer === res) {
alert("correct!");
window.location.reload();
}
});
}
}
document.getElementById("reload").addEventListener("click", function () {
displayOperation();
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Number Game</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="number_one">
</div>
<div id="operand_type">
</div>
<div id="number_two">
</div>
<div id="text_Area">
<label for="answer">
<input type="number" id="answer">
</label>
</div>
<div class="buttons">
<button type="button" id="calculate">Calculate</button>
<button type="button" id="reload">Load</button>
</div>
<div id="result">
</div>
<script src="index.js" charset="UTF-8"></script>
</body>
</html>
Some input would be appreciated.
Thank you!

You had multiple issues in your code. The input field for the answer has the id answer not text_Area. you were defining the functions for add, multiply and substract in the wrong scope. and you were using === for the check but .value returns a string and num1 + num2 (for example) returns a integer, so the check would always be wrong. If you have questions about my changes to your code, I'm happy to help.
var operandArr = ["+", "-", "*"];
var num1;
var num2;
var randomOperand;
function displayOperation() {
num1 = Math.floor(Math.random() * 100) + 1;
num2 = Math.floor(Math.random() * 100) + 1;
randomOperand = operandArr[Math.floor(Math.random() * operandArr.length)];
document.getElementById("number_one").innerHTML = num1;
document.getElementById("number_two").innerHTML = num2;
document.getElementById("operand_type").innerHTML = randomOperand;
}
document.getElementById("reload").addEventListener("click", function () {
displayOperation();
});
function calculate() {
switch (randomOperand) {
case "+":
add()
break;
case "-":
subtract()
break;
case "*":
multiply()
break;
}
}
function add() {
let res = num1 + num2;
let userAnswer = document.getElementById("answer").value;
if (parseInt(userAnswer) === res) {
alert("correct!");
window.location.reload();
}
}
function subtract() {
let res = num1 - num2;
let userAnswer = document.getElementById("answer").value;
if (parseInt(userAnswer) === res) {
alert("correct!");
window.location.reload();
}
}
function multiply() {
let res = num1 * num2;
let userAnswer = document.getElementById("answer").value;
if (parseInt(userAnswer) === res) {
alert("correct!");
window.location.reload();
}
}
document.getElementById("calculate").addEventListener("click", function () {
calculate();
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Number Game</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="number_one">
</div>
<div id="operand_type">
</div>
<div id="number_two">
</div>
<div id="text_Area">
<label for="answer">
<input type="number" id="answer">
</label>
</div>
<div class="buttons">
<button type="button" id="calculate">Calculate</button>
<button type="button" id="reload">Load</button>
</div>
<div id="result">
</div>
<script src="index.js" charset="UTF-8"></script>
</body>
</html>

You can extract computation into another function and do required computation with Function()
function displayOperation() {
let num1 = Math.floor(Math.random() * 100) + 1;
let num2 = Math.floor(Math.random() * 100) + 1;
let operandArr = ["+", "-", "*"];
let randomOperand = operandArr[Math.floor(Math.random() * operandArr.length)];
document.getElementById("number_one").innerHTML = num1;
document.getElementById("number_two").innerHTML = num2;
document.getElementById("operand_type").innerHTML = randomOperand;
}
document.getElementById("calculate").addEventListener("click", function () {
let num1 = document.getElementById("number_one").innerHTML;
let num2 = document.getElementById("number_two").innerHTML;
let randomOperand = document.getElementById("operand_type").innerHTML;
let userAnswer = document.getElementById("answer").value;
let res = Function(`'use strict'; return (${num1 + randomOperand +num2})`)() ;
console.log(res)
if (parseInt(userAnswer) === res) {
alert("correct!");
window.location.reload();
} else {
console.log('huuu')
}
});
document.getElementById("reload").addEventListener("click", displayOperation);
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Number Game</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="number_one">
</div>
<div id="operand_type">
</div>
<div id="number_two">
</div>
<div id="text_Area">
<label for="answer">
<input type="number" id="answer">
</label>
</div>
<div class="buttons">
<button type="button" id="calculate">Calculate</button>
<button type="button" id="reload">Load</button>
</div>
<div id="result">
</div>
<script src="index.js" charset="UTF-8"></script>
</body>
</html>

Related

Javascript calculator stringing multiple operators

I'm working on The Odin Project curriculum at the moment, and the calculator is the final project of the foundations. I have a mostly working app, but I just can't seem to be able to chain multiple operators without having to press the equals button in between. To clarify, I should be able to do 5+5+5 etc. At the moment however, it does nothing after the first 5+5. I have been stuck on this for quite a while, and am getting frustrated.
Any help is greatly appreciated.
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Calculator</title>
</head>
<body>
<div class="calculator">
<div class="output">
<div class="previous"></div>
<div class="operator-display"></div>
<div class="current"></div>
</div>
<button class="span-two clear">Clear</button>
<button class="span-two delete">Delete</button>
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="operator">+</button>
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="operator">-</button>
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="operator">*</button>
<button class="decimal">.</button>
<button class="number">0</button>
<button class="equals">=</button>
<button class="operator">/</button>
</div>
</body>
<script src="script.js"></script>
</html>
javascript:
const numberBtns = document.querySelectorAll(".number");
const operationBtns = document.querySelectorAll(".operator");
const equalsBtn = document.querySelector(".equals");
const clearBtn = document.querySelector(".clear");
const deleteBtn = document.querySelector(".delete");
const previous = document.querySelector(".previous");
const current = document.querySelector(".current");
const operatorDisplay = document.querySelector(".operator-display");
let decimalBtn = document.querySelector(".decimal");
let firstNumber = 0;
let secondNumber = 0;
let result;
//function to clear output screen
function clearOutput(){
previous.innerText = "";
current.innerText = "";
operatorDisplay.innerText = "";
}
//calls function to clear screen on a click
clearBtn.addEventListener("click", ()=>{
clearOutput();
})
//add number to screen on click
numberBtns.forEach(button => {
button.addEventListener('click', ()=>{
current.innerText += button.innerText;
})
})
decimalBtn.addEventListener('click', ()=>{
addDecimal();
})
//when pressing an operator button, the current operand is moved to the previous operand //place
operationBtns.forEach(button =>{
button.addEventListener('click', ()=>{
if (operatorDisplay.innerText != "") {
operate();
}
else{
previous.innerText = current.innerText;
firstNumber = previous.innerText;
current.innerText = "";
operatorDisplay.innerText = button.innerText;
}
})
})
//calculates result based on chosen operator
equalsBtn.addEventListener('click', ()=>{
secondNumber = current.innerText;
operate();
//Display error message if user tries to divide by 0
if (secondNumber === "0" && operatorDisplay.innerText === "/") {
errorMessage();
}
//pressing equals button does nothing if either operand is empty
if (current.innerText != "" && previous.innerText != "") {
displayResult();
}
})
//deletes last number of the current operand on click
deleteBtn.addEventListener('click', ()=>{
current.innerText = current.innerText.slice(0, -1);
})
//displays result
function displayResult(){
clearOutput();
//rounds the result in case of a ridiculous number of decimals
current.innerText = Math.round(result * 10000) / 10000;
}
function operate(){
if (operatorDisplay.innerText === "+") {
result = parseFloat(firstNumber) + parseFloat(secondNumber);
}
if (operatorDisplay.innerText === "-") {
result = parseFloat(firstNumber) - parseFloat(secondNumber);
}
if (operatorDisplay.innerText === "*") {
result = parseFloat(firstNumber) * parseFloat(secondNumber);
}
if (operatorDisplay.innerText === "/") {
result = parseFloat(firstNumber) / parseFloat(secondNumber);
}
}
function errorMessage(){
clearOutput();
result = "Division by 0 impossible";
}
//adds decimal point
function addDecimal(){
if (!current.innerText.includes(".")) {
current.innerText += ".";
}
}

Using PokeAPI to fetch data. Can't figure out why span element is not updating

So I'm using the PokeAPI to fetch the name of a Pokemon, then shuffling that name, and the user is supposed to guess what it is in the input. If they don't know then they can click the next button and it reshuffles a new mon. If they guess right they can press the same next button for a new mon. Each time they guess right the score increases by 1. That's working but I cant figure out why the out of/total games span isn't updating as well. Please excuse my terrible attempt at JS I'm very new if you can help me make my code look better that would be great.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<title>Who's that Pkmn?</title>
</head>
<body>
<header>
<h1>Who's that Pokemon?!</h1>
</header>
<div id="jumble">?????</div>
<div class="container">
<input id="guess" type="text" placeholder="enter pkmn name" />
<button id="submit" class="btn" type="submit">go</button>
<button id="next" class="btn">next</button>
<p id="msg">unshuffle the letters</p>
</div>
<div id="scorekeepers">
<p>Score: <span id="score">0</span>
out of: <span id="gamesPlayed">0</span></p>
</div>
<script src="script.js"></script>
</body>
</html>
let jumbledName = document.querySelector("#jumble");
let guessInput = document.querySelector('#guess')
let submitButton = document.querySelector('#submit')
let nextButton=document.querySelector('#next')
let messageDisplay = document.querySelector('#msg')
let score = document.querySelector('#score')
let gamesPlayed = document.querySelector('#gamesPlayed')
score = 0;
gamesPlayed = 0;
let getPokemonName = function() {
fetch(`https://pokeapi.co/api/v2/pokemon/${Math.floor(Math.random()*151+1)}/`)
.then(function(response) {
return response.json();
})
.then(function(data) {
const pokeName = data.name;
const pokeNameJumbled = pokeName.shuffle();
displayInfomation(pokeName, pokeNameJumbled);
});
};
getPokemonName();
guessInput.value=''
// pokeNameJumbled=''
const displayInfomation = function(name, jumbledName) {
pokeName = name;
pokeNameJumbled = jumbledName;
jumble.textContent = jumbledName;
};
const displayMessage = function(message) {
document.querySelector("#msg").textContent = message;
};
const checkName = function () {
document.querySelector("#guess").textContent = guessInput;
const guess = document.querySelector("#guess").value.toLowerCase();
if (!guess) {
displayMessage("No guess entered!");
} else if (guess === pokeName) {
displayMessage(`Thats correct! It's ${pokeName}!`)
score++
document.querySelector("#score").textContent = score;
guessInput.value=''
} else if (guess != pokeName) {
displayMessage(`Wrong!`);
document.querySelector("#gamesPlayed").textContent = gamesPlayed;
}
};
submitButton.addEventListener('click', checkName)
nextButton.addEventListener('click',getPokemonName)
String.prototype.shuffle = function() {
var a = this.split(""),
n = a.length;
for (var i = n - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = a[i];
a[i] = a[j];
a[j] = tmp;
}
return a.join("");
};

How to display diffrent images using if function after pressing a button

For my collage assignment i need to create a html webpage where if you press the button yes it displays a number and a corresponding image. i have figured out how to create the random number but cannot get the corresponding image to show up when the button in pressed. i am very new to this and any help would be appreciated
This is the java script
function randomNumber() {
var ranNumgen = Math.floor((Math.random() * 6) + 1);
}
console.log("randomNumber");
if ("number" == 1) {
document.getElementById('img1').src = "image/dice1.jpg";
} else if ("number" == 2) {
document.getElementById('img1').src = "image/dice2.jpg";
} else if ("number" == 3) {
document.getElementById("img1").src = "image/dice3.jpg"
} else if ("number" == 4) {
document.getElementById("img1").src = "image/dice4.jpg";
} else if ("number" == 5) {
document.getElementById("img1").src = "image/dice5.jpg";
} else if ("number" == 6) {
document.getElementById("img1").src = "image/dice6.jpg";
}
<head>
<title></title>
<button id="b" onclick="ranNumgen()"> Yes </button>
<button onclick="Num2button()">No</button>
</head>
<body>
<p id="number"> </p>
And this is all my code
<!DOCTYPE html>
<html>
<head>
<title></title>
<button id="b" onclick="ranNumgen()"> Yes </button>
<button onclick="Num2button()">No</button>
</head>
<body>
<p id="number"> </p>
<script type="text/javascript">
function randomNumber() {
var ranNumgen = Math.floor((Math.random() *6) +1);
}
console.log("randomNumber");
if ("number" ==1 ) {
document.getElementById('img1').src ="image/dice1.jpg";
}
else if ("number" ==2) {
document.getElementById('img1').src ="image/dice2.jpg";
}
else if ("number"==3) {
document.getElementById("img1").src="image/dice3.jpg"
}
else if ("number"==4) {
document.getElementById("img1").src="image/dice4.jpg";
}
else if ("number"==5) {
document.getElementById("img1").src="image/dice5.jpg";
}
else if ("number"==6) {
document.getElementById("img1").src="image/dice6.jpg";
}
function Num2button() {
var button2 = "Are you sure"
alert(button2);
}
</script>
</body>
</html>

You can put your logic to assign the picture in your randomNumber function, the best would be to rename it to something like generateRandomPicture.
Then you need an element with the id you have specified and
also I would recommend that you use an eventListener instead of doing the inline scripting.
You can add .addEventListener() to your element.
document.getElementById('b').addEventListener('click', randomNumber);
document.getElementById('b').addEventListener('click', randomNumber);
function randomNumber() {
let number = Math.floor((Math.random() * 6) + 1);
if (number == 1) {
document.getElementById('img1').src = "image/dice1.jpg";
} else if (number == 2) {
document.getElementById('img1').src = "image/dice2.jpg";
} else if (number == 3) {
document.getElementById("img1").src = "image/dice3.jpg"
} else if (number == 4) {
document.getElementById("img1").src = "image/dice4.jpg";
} else if (number == 5) {
document.getElementById("img1").src = "image/dice5.jpg";
} else if (number == 6) {
document.getElementById("img1").src = "image/dice6.jpg";
}
}
<head>
<title></title>
</head>
<body>
<p id="number"> </p>
<img id="img1"></img>
<button id="b"> Yes </button>
<button onclick="Num2button()">No</button>
</body>

I'm aware that the question is already answered and that you are new to this but this is a more scalable approach and looks a bit cleaner.
NOTE: This snippet assumes the images in the array in the correct order, from 1 to N.
let images = [
'https://via.placeholder.com/10',
'https://via.placeholder.com/20',
'https://via.placeholder.com/30',
'https://via.placeholder.com/40',
'https://via.placeholder.com/50',
]
function setRandomImage() {
let index = Math.floor(Math.random() * images.length);
document.getElementById('img').src = images[index];
document.getElementById('num').innerHTML = index + 1;
}
<img id="img"></img>
<p id="num"></p>
<button onclick="setRandomImage()">Yes</button>
<button>No</button>
As per epascarello's comment, this does not rely on the order of the images but they do have to be in the array.
var images = [
'https://via.placeholder.com',
'https://via.placeholder.com',
'https://via.placeholder.com',
'https://via.placeholder.com',
'https://via.placeholder.com',
]
function setRandomImage() {
let index = Math.floor(Math.random() * images.length) + 1;
document.getElementById('img').src = images[index - 1] + '/' + index + '0';
document.getElementById('num').innerHTML = index;
}
<img id="img"></img>
<p id="num"></p>
<button onclick="setRandomImage()">Yes</button>
<button>No</button>
And if you always have a static number of images which are properly named you can even do away with the images array.
function setRandomImage() {
let rand = Math.floor(Math.random() * 6) + 1;
document.getElementById('img').src = 'https://via.placeholder.com/' + rand + '0';
document.getElementById('num').innerHTML = rand;
}
<img id="img"></img>
<p id="num"></p>
<button onclick="setRandomImage()">Yes</button>
<button>No</button>

Display the return value from a function to a text box

I'm trying to code a calculator that asks you to input two numbers and then pick one of four operations(+,-,/,*) which then displays the result. The problem I'm having is when the answer is returned(From the JS function) how do I get it to display the answer here Total : <input type="number" id="answer" />" in my HTML?
HTML
<html lang="en">
<head>
<title>CALCULATOR</title>
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<h1>Calculator</h1>
First Number : <input type="numbers" id="fnum" /><br /><br />
Second Number : <input type="numbers" id="snum" /><br /><br />
Operation? :
<select id="operation">
<option value="1">+</option>
<option value="2">-</option>
<option value="3">/</option>
<option value="4">*</option> </select
><br /><br />
<input type="button" id="Submit" value="Calculate" onclick="calculate()" /><br /><br />
Total : <input type="number" id="answer" />
<script src="script.js"></script>
</body>
</html>
JS
function calculate() {
var num1 = parseInt(document.getElementById("fnum").value);
var num2 = parseInt(document.getElementById("snum").value);
var o= document.getElementById("#operation");
var operation = o.options[o.selectedIndex].value;
if (operation == 1) {
var answer = num1 + num2;
return answer;
}
else if (operation == 2) {
var answer = num1 - num2;
return answer;
}
else if (operation == 3) {
var answer = num1 / num2;
return answer;
}
else {
var answer = num1 * num2;
return answer;
}
}

similar like you got values from imput elements.
try to put code in calucate
document.getElementById("answer").value = answer;

First of all you should make your answer variable as global here:
Second: After calculating answer all you need to set your answer as input's value property.
Like that:
function calculate() {
var num1 = parseInt(document.getElementById("fnum").value);
var num2 = parseInt(document.getElementById("snum").value);
var o= document.getElementById("#operation");
var operation = o.options[o.selectedIndex].value;
let answer = 0;
let resultElm = document.getElementById('answer');
resultElm.input = '';
if (operation == 1) {
answer = num1 + num2;
}
else if (operation == 2) {
answer = num1 - num2;
}
else if (operation == 3) {
answer = num1 / num2;
}
else {
answer = num1 * num2;
}
resultElm.value = answer
}
Hope, This would help you.

There is error at document.getElementById("#operation"), it should be document.getElementById("operation") without #.
document.getElementById("name").value= answer

Instead of returning the result, you can set the HTML element value to the calculated answer:
function calculate() {
var num1 = parseInt(document.getElementById("fnum").value);
var num2 = parseInt(document.getElementById("snum").value);
// Create a reference to the HTML element <input type="number" id="answer" />
var answerOutput = document.getElementById("answer");
var o = document.getElementById("#operation");
var operation = o.options[o.selectedIndex].value;
var answer;
if (operation == 1) {
answer = num1 + num2;
}
else if (operation == 2) {
answer = num1 - num2;
}
else if (operation == 3) {
var answer = num1 / num2;
return answer;
}
else {
answer = num1 * num2;
}
// Set the HTML element value with the answer value
answerOutput.value = answer;
}

JavaScript - Calling a function again is not working

This is kind of hard to explain, but I want to make it so when someone gets the answer right to a question, they get a new question. I have tried calling the function more than once but that doesn't work. I have tried many things like making cookies, but I can't get it to work. Here is my current code:
//Getting elements
var ques = document.getElementById("question");
var ansBox = document.getElementById("ansBox");
var submitBtn = document.getElementById("submitBtn");
var isCorrect = document.getElementById("isCorrect");
var quesNum = document.getElementById("quesNum");
//Variables
var num1 = Math.floor((Math.random() * 10) + 1);
var num2 = Math.floor((Math.random() * 10) + 1);
var ans = num1 + num2;
var questionNumber = 1;
quesNum.innerHTML = questionNumber;
//Check if answer is correct or not
function checkAns() {
if(ansBox.value == ans) {
isCorrect.innerHTML = "Good job! Your answer was correct!";
questionNumber++;
quesNum.innerHTML = questionNumber;
ques.innerHTML = " ";
question();
//Call if statement when questionNumber = 10 and disable submitBtn and ansBox
if(questionNumber == 10) {
isCorrect.innerHTML = "Congratulations! You have completed all 10 questions! Refresh the page to do more!";
ansBox.disabled = true;
submitBtn.disabled = true;
}
} else {
isCorrect.innerHTML = "Uh-oh, your answer was incorrect!";
}
}
//Ask question
function question() {
ques.innerHTML = num1 + " + " + num2;
}
//Call question function
question();
body {
font-family: Arial;
}
div {
padding-top: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<h1>Edu Game One</h1>
<h3 id="question"></h3>
<input type="text" id="ansBox" />
<button id="submitBtn" type="submit" onclick="checkAns()">Submit</button>
<p id="isCorrect"></p>
<span id="quesNum"></span>
<span>/ 10</span>
</div>
<script src="scripts.js"></script>
</body>
</html>

The code that generates the two random numbers is currently not inside a function, so it runs once when the page first loads. You just need to move those lines inside your question() function, so then each time question() is called you'll get new random values.
You'll want to set the ans value from there too (but leave ans as a global variable so that it can be checked from your other function):
function question() {
var num1 = Math.floor((Math.random() * 10) + 1);
var num2 = Math.floor((Math.random() * 10) + 1);
ans = num1 + num2;
ques.innerHTML = num1 + " + " + num2;
}
In context:
//Getting elements
var ques = document.getElementById("question");
var ansBox = document.getElementById("ansBox");
var submitBtn = document.getElementById("submitBtn");
var isCorrect = document.getElementById("isCorrect");
var quesNum = document.getElementById("quesNum");
//Variables
var ans;
var questionNumber = 1;
quesNum.innerHTML = questionNumber;
//Check if answer is correct or not
function checkAns() {
if(ansBox.value == ans) {
isCorrect.innerHTML = "Good job! Your answer was correct!";
questionNumber++;
quesNum.innerHTML = questionNumber;
ques.innerHTML = " ";
question();
//Call if statement when questionNumber = 10 and disable submitBtn and ansBox
if(questionNumber == 10) {
isCorrect.innerHTML = "Congratulations! You have completed all 10 questions! Refresh the page to do more!";
ansBox.disabled = true;
submitBtn.disabled = true;
}
} else {
isCorrect.innerHTML = "Uh-oh, your answer was incorrect!";
}
}
//Ask question
function question() {
var num1 = Math.floor((Math.random() * 10) + 1);
var num2 = Math.floor((Math.random() * 10) + 1);
ans = num1 + num2;
ques.innerHTML = num1 + " + " + num2;
}
//Call question function
question();
body {
font-family: Arial;
}
div {
padding-top: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<h1>Edu Game One</h1>
<h3 id="question"></h3>
<input type="text" id="ansBox" />
<button id="submitBtn" type="submit" onclick="checkAns()">Submit</button>
<p id="isCorrect"></p>
<span id="quesNum"></span>
<span>/ 10</span>
</div>
<script src="scripts.js"></script>
</body>
</html>
Also, you may want to move the following lines:
questionNumber++;
quesNum.innerHTML = questionNumber;
...to be before the if statement, because at the moment it doesn't count questions attempted, it counts only questions that were answered correctly.

Develop Reference

JavaScript is the programming language of the Web.

Javascript number game not showing output - javascript

Related

Javascript calculator stringing multiple operators

Using PokeAPI to fetch data. Can't figure out why span element is not updating

How to display diffrent images using if function after pressing a button

Display the return value from a function to a text box

JavaScript - Calling a function again is not working

Categories

Resources