I made a simple Javascript/HTML calculator where you can input two digits and select an operation and it solves it The problem is, it always prints "Answer: Undefined" and "Invalid Operation" It worked until I added the select an operation (it was strictly addition then)
Here is my code
var back = 0;
var DoIt;
var operation = document.getElementById("Select").value;
function add(num1, num2) {
return num1 + num2;
}
function multiply(num1, num2) {
return num1 * num2;
}
function subtract(num1, num2) {
return num1 - num2;
}
function divide(num1, num2) {
return num1 / num2;
}
function functions() {
if (back==0)
{
var first = document.getElementById("number1").value;
var second = document.getElementById("number2").value;
first = parseInt(first);
second = parseInt(second);
if (operation=="Add"||operation=="add")
{
var DoIt = add(first, second);
}
else if (operation=="Subtract"||operation=="subtract")
{
DoIt = subtract(first, second);
}
else if (operation=="Multiply"||operation=="multiply")
{
DoIt = multiply(first, second);
}
else if (operation=="Divide"||operation=="divide")
{
DoIt = divide(first, second);
}
else
{
document.getElementById("Select").value = "Invalid Operation";
}
document.getElementById("number1").style.display = 'none';
document.getElementById("number2").style.display = 'none';
document.getElementById("Answer").style.display = 'block';
document.getElementById("Answer").value = "Answer: " + DoIt;
document.getElementById("write").value = "Go Back";
back = back+1;
}
else
{
document.getElementById("Answer").style.display = 'none';
document.getElementById("number1").style.display = 'inline';
document.getElementById("number2").style.display = 'inline';
document.getElementById("write").value = "Go";
back = 0;
}
}
HTML
<input id="Answer" placeholder="Answer" class="inputs">
<input id="number1" placeholder="First Number" class="inputs">
<br />
<input id="number2" placeholder="Second Number" class="inputs">
<br />
<input id="Select" placeholder="Choose An Operation" class="inputs">
<p id="Texts">Enter Add, Subtract, Multiply, or Divide.</p>
<input type="button" id="write" onclick="functions();" value="Go" class="button">
You have to declare the variables operation
and DoIt
inside the function functions()
:
function functions(){
var operation = document.getElementById("Select").value;
var DoIt;
if (back==0)
// the rest of the function
}
And you shouldn't declare the variable DoIt
twice. So the line var DoIt = add(first, second);
should become DoIt = add(first, second);
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.