T.J T.J - 1 month ago 13
Javascript Question

JS If Else Error

When I currently hit my submit button it changes the if else statement. I am unable to come up with a way that when I hit submit it calculates whatever the symbol shows. Under the number inputs, it should show the submit button. When the switch sign is + and user clicked on submit, the sum of all the five numbers should be displayed in the label. When the switch sign is *, the result of the 5
numbers multiplied together should be shown.`

var image_tracker='p';
function change(){
var image = document.getElementById('operator');
if(image_tracker=='p'){
image.src = "images/mult.png"
image_tracker='m';
var val1 = parseInt(document.getElementById("value1").value);
var val2 = parseInt(document.getElementById("value2").value);
var val3 = parseInt(document.getElementById("value3").value);
var val4 = parseInt(document.getElementById("value4").value);
var val5 = parseInt(document.getElementById("value5").value);
var ansD = document.getElementById("answer");
ansD.value = val1 * val2 * val3 * val4 * val5;
}else{
image.src='images/plus.png'
image_tracker='p';

var val1 = parseInt(document.getElementById("value1").value);
var val2 = parseInt(document.getElementById("value2").value);
var val3 = parseInt(document.getElementById("value3").value);
var val4 = parseInt(document.getElementById("value4").value);
var val5 = parseInt(document.getElementById("value5").value);
var ansD = document.getElementById("answer");
ansD.value = val1 + val2 + val3 + val4 + val5;

}
}
</script>
<body>
<div class="form">
<input type="text" id="value1" name="value1" value=""/>
<div class= value1>
<p>You are entering the 1st Number</p>
</div>
<input type="text" id="value2" name="value2" value=""/>
<div class= value2>
<p>You are entering the 2nd Number</p>
</div>
<input type="text" id="value3" name="value3" value=""/>
<div class= value3>
<p>You are entering the 3rd Number</p>
</div>
<input type="text" id="value4" name="value4" value=""/>
<div class= value4>
<p>You are entering the 4th Number</p>
</div>
<input type="text" id="value5" name="value5" value=""/>
<div class= value5>
<p>You are entering the 5th Number</p>
</div>
<br/>
<input type="button" name="submit" value="Submit" onclick="javascript:change()"/>
<br/>
<img src="images/plus.png" alt="operator" id= "operator" onclick="change()">
<br/>
<input type="label" id="answer" name="answer" value=""/>
</div>



Answer

So, you're gonna have to work with it, but try This Fiddle:

First, you need 2 different functions to perform the different tasks.

One to run the calculation Note: you don't need to assign the "vals" in both if clauses, because you're using the same elements. You also don't need a p and or m variable, because you can just test the img's src location:

function calculateMe() {
    var image = document.getElementById('operator');
    var val1 = parseInt(document.getElementById("value1").value);
    if (isNaN(val1)) { val1 = 0; }
    var val2 = parseInt(document.getElementById("value2").value);
    if (isNaN(val2)) { val2 = 0; }
    var val3 = parseInt(document.getElementById("value3").value);
    if (isNaN(val3)) { val3 = 0; }
    var val4 = parseInt(document.getElementById("value4").value);
    if (isNaN(val4)) { val4 = 0; }
    var val5 = parseInt(document.getElementById("value5").value);
    if (isNaN(val5)) { val5 = 0; }
    var ansD = document.getElementById("answer");
    if(image.getAttribute("src") == "~/images/mult.png") {  
        ansD.value = val1 * val2 * val3 * val4 * val5;
    } else {
        ansD.value = val1 + val2 + val3 + val4 + val5;
    }
}

And one to change the image:

function changeIcon() {
    var image = document.getElementById('operator');
    if (image.getAttribute("src") == "~/images/mult.png") {
        image.src = "~/images/plus.png";
    } else {
        image.src = "~/images/mult.png";
    }
}

Then, in your HTML, just call the different functions on the individual elements:

<input type="button" name="submit" value="Submit" onclick="calculateMe()"/>
<img src="~/images/plus.png" alt="operator" id= "operator" onclick="changeIcon()">   

You'll have to play around with the image locations and the exact URL's, but that's the gist.

Comments