Display result of computation (javascript) in HTML

Question

I am trying to take two numbers from html and using javascript return sum of both but my num1 and num2 contains HTMLInputElement??

html:

<head>
        <script type ="text/javascript" src="functions.js"></script>
    </head>
    <body>
        Value 1: <input type="text" id="tb1" name="tb1"><br/>
        Value 2: <input type="text" id="tb2" name="tb2"><br/>
        Result: <input type="text" id="tb3" name="tb3"><br/>
        <button onclick="validateForm()" Type="button" id="b1" name="b1">Go</button>
    </body>

javascript:

function validateForm() {
    var x = document.getElementById("tb1");
    var y = document.getElementById("tb2");
    if (x == null || x == "" || y == null || y == "")
    {
        alert("Value cannot be empty");
        return false;
    }
    else {
        //myAdd(x,y);
        alert(x + y);
        var num1 = parseFloat(x);
        var num2 = parseFloat(y);
        var total = num1 + num2;
        document.getElementById("tb3").innerHTML = total;
    }
}

The Process · Accepted Answer · 2016-03-06 02:18:19Z

You are not parsing and adding values from those two inputs, but objects itself. Because of that your if statement block would never run, as you are comparing object to null.Also and you can't set innerHTML of an input,have to use .value.
Check the snippet below

parseFloat(x) //you must parseFloat(x.value),

document.getElementById("tb3").value = total; //you have to use .value instead of .innerHTML with input

function validateForm() {
  var x = document.getElementById("tb1").value;
  var y = document.getElementById("tb2").value;
  if (x == null || x === "" || y == null || y === "") {
    alert("Value cannot be empty");
    return false;
  } else {
    //myAdd(x,y);

    var num1 = parseFloat(x);
    var num2 = parseFloat(y);
    var total = num1 + num2;
    document.getElementById("tb3").value = total;
  }
}

Value 1:
<input type="text" id="tb1" name="tb1">
<br/>Value 2:
<input type="text" id="tb2" name="tb2">
<br/>Result:
<input type="text" id="tb3" name="tb3">
<br/>
<button onclick="validateForm()" Type="button" id="b1" name="b1">Go</button>

Collectives™ on Stack Overflow

Display result of computation (javascript) in HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related