CODEWITHSUNDEEP
javascripthtml
Pamela Keogh
Pamela Keogh

Reputation: 133

Display result of computation (javascript) in HTML

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;
    }
}

Upvotes: 2

Views: 101

Answers (1)

The Process
The Process

Reputation: 5953

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>

Upvotes: 1

Related Questions