简体   繁体   中英

Select operation in simple calculator not working?

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM