CODEWITHSUNDEEP
javascripthtmlmath
Jamie Vic
Jamie Vic

Reputation: 23

Result is not showing

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
    var result = document.getElementById('answer').value;
    if (document.getElementById('add')) {
        function myFunction() {
            add1 = document.getElementById('num1').value;
            add2 = document.getElementById('num2').value;
            ans = (parseInt(add1)+parseInt(add2));
            result.innerHTML = ans;
        }
    }
</script>
</head>
<body>
<input type="text" id="num1" />
    <select id="problem">
        <option id="add">+</option>
        <option id="sub">-</option>
        <option id="mul">x</option>
        <option id="div">÷</option>
    </select>
<input type="text" id="num2" />
<br />
<input type="submit" onclick="myFunction();" />
<br />
<input type="text" id="answer" readonly />
</body>
</html>

I'm trying to make a sum solver by taking the values from the two text boxes and after clicking the button, it should post the result in the text box below. However it is not doing that.

I also want the program to change how a problem is solved using the dropdown menu with the mathematical symbols.

Thanks.

Upvotes: 1

Views: 103

Answers (7)

Amarnath Balasubramanian
Amarnath Balasubramanian

Reputation: 9460

HTML

<input type="text" id="num1" />
<select id="problem">
    <option id="add">+</option>
    <option id="sub">-</option>
    <option id="mul">x</option>
    <option id="div">÷</option>
</select>
<input type="text" id="num2" />
<br />
<input type="submit" onclick="myFunction();" />
<br />
<input type="text" id="answer" readonly />

JavaScript

function myFunction() {
    var result = document.getElementById('answer');
    var operator = document.getElementById('problem').value;
    var add1 = document.getElementById('num1').value;
    var add2 = document.getElementById('num2').value;
    var ans;
    if (!isNaN(add1) && !isNaN(add2)) {
        //Addition
        if (operator == '+')

        {

            ans = (parseInt(add1) + parseInt(add2));
        }
        //Subtraction
        else if (operator == '-') {

            ans = (parseInt(add1) - parseInt(add2));

        }
        //Multiplication
        else if (operator == 'x') {

            ans = (parseInt(add1) * parseInt(add2));

        }
        //Division
        else if (operator == '÷') {

            ans = (parseInt(add1) / parseInt(add2));
        }
        //Result
        result.value = ans;
    } else {
        alert("Please enter numeric values only");
        return false;
    }
}

Fiddle Demo

Upvotes: 0

renuka
renuka

Reputation: 549

The problem should be with the line 

var result = document.getElementById('answer').value;

Try the below snippet

var result=document.getElementById('answer');
ans = (parseInt(add1)+parseInt(add2));
result.value=ans;

http://jsfiddle.net/2W5za/1/

Upvotes: 1

jasonscript
jasonscript

Reputation: 6170

I think you're after something like this

function myFunction() {
    var result = document.getElementById('answer'),
        operator = document.getElementById('problem').value,
        add1 = document.getElementById('num1').value,
        add2 = document.getElementById('num2').value,
        ans = 0;

    switch (operator) {
        case '+':
            ans = (parseInt(add1) + parseInt(add2));
            break;
        case '-':
            ans = (parseInt(add1) - parseInt(add2));
            break;
        case 'x':
            ans = (parseInt(add1) * parseInt(add2));
            break;
        case '÷':
            ans = (parseInt(add1) / parseInt(add2));
            break;
    }

    result.value = ans;
}

instead of using if statements, and creating different functions, just have one function and determine the operand.

Edit: Also, watch out for your variable declarations. 'ans', 'add1' and 'add2' weren't being declared which resulted in global variables being created

Upvotes: 1

Abraham Hamidi
Abraham Hamidi

Reputation: 13789

There are many things wrong with your code. However, to fix your problem, change = ans to = ans.toString();

You see, in javascript integers and strings cannot change to each other's values without a conversion (kind of like a brother and sister refusing to share), so toString() is used for a conversion to String.

The other thing to change is innerHTML to value, because you are dealing with text boxes.

Upvotes: 0

Phil
Phil

Reputation: 4069

<!DOCTYPE html>
<html>
<head></head>
<body>
 <input type="text" id="num1" />
    <select id="problem">
        <option value="add">+</option>
        <option value="sub">-</option>
        <option value="mul">x</option>
        <option value="div">%</option>
    </select>
 <input type="text" id="num2" />
 <br />
 <input type="submit" onclick="myFunction();" />
 <br />
 <input type="text" id="answer" readonly />


 <script type="text/javascript">
     function myFunction() 
     {
         var e = document.getElementById("problem");
         var sOperation = e.options[e.selectedIndex].value;
         add1 = document.getElementById('num1').value;
         add2 = document.getElementById('num2').value;
         var ans;
         if (!isNaN(add1) && !isNaN(add2)){
        if(sOperation=='add'){
            //Add
            ans = parseInt(add1)+parseInt(add2);
        } else if (sOperation=='sub') {
            //Subtract
            ans = parseInt(add1)-parseInt(add2);
        } else if (sOperation=='mul') {
            //Multiple
            ans = parseInt(add1) * parseInt(add2);
        } else if (sOperation=='div') {
            //Divide
            ans = parseInt(add1) / parseInt(add2);
        }
        document.getElementById("answer").value = ans;      
    } else {
        alert("Please enter numeric values only");
        return false;
    }
}

Upvotes: 0

T. Stone
T. Stone

Reputation: 19485

Regarding the first part of the question (and that for which this question is titled), one problem I see is this line of code right here:

var result = document.getElementById('answer').value;

What is the type of result? Later on you treat it as if it is a DOMElement with result.innerHTML = ans; by assuming it has a property innerHTML. However because you used .value it's in fact a string which will not have innerHTML.

Regarding the second part, you can assert which function is selected in the <select> by looking at it's .value. The <option> tags will always exist, regardless of if they are selected or not.

Speaking more broadly, I highly recommend you check out using the debugger in either chrome or firefox. That will allow you to drop a breakpoint in your code, and figure out if the value is being computed correctly, and see what it is attempting to write to, all interactively.

Chrome: https://developers.google.com/chrome-developer-tools/docs/javascript-debugging

Firefox: https://developer.mozilla.org/en-US/docs/Tools/Debugger

Upvotes: 0

James Montagne
James Montagne

Reputation: 78640

You have a few issues. Not sure what you were going for with the if but remove it. Also, set the value of a textbox with value not innerHTML.

function myFunction() {
    var result = document.getElementById('answer');
    add1 = document.getElementById('num1').value;
    add2 = document.getElementById('num2').value;
    ans = (parseInt(add1)+parseInt(add2));
    result.value = ans;
}

http://jsfiddle.net/LjqMJ/

Upvotes: 0

Related Questions