I was just trying to write a simple javascript program that will demonstrate to take user input from text field, and clicking the button will display the summation result of those number in another text field. But unfortunately the below code is not working. Clicking the button does not show anything in the result text field.
<body>
<div>
<div>
<h1>Add two number using text box as input using javascript</h1>
</div>
Enter First Number : <br>
<input type="text" id="Text1" name="TextBox1">
<br>
Enter Second Number : <br>
<input type="text" id="Text2" name="TextBox2">
<br>
Result : <br>
<input type="text" id="txtresult" name="TextBox3">
<br>
<input type="button" name="clickbtn" value="Display Result" onclick="add_number()">
<script type="text/javascript">
function add_number(){
var first_number = parseInt(document.getElementsById("Text1").value);
var second_number = parseInt(document.getElementsById("Text2").value);
var result = first_number + second_number;
document.getElementById("txtresult").innerHTML = result;
}
</script>
This question is related to
javascript
html
function
textbox
<script>
function myFunction() {
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var x = y + z;
document.getElementById("result").innerHTML = x;
}
</script>
<p>
<label>Enter First Number : </label><br>
<input type="number" id="txt1" name="text1"><br/>
<label>Enter Second Number : </label><br>
<input type="number" id="txt2" name="text2">
</p>
<p>
<button onclick="myFunction()">Calculate</button>
</p>
<br/>
<p id="result"></p>
<script>
function sum()
{
var value1= parseInt(document.getElementById("txtfirst").value);
var value2=parseInt(document.getElementById("txtsecond").value);
var sum=value1+value2;
document.getElementById("result").value=sum;
}
</script>
You can simply convert the given number using Number primitive type in JavaScript as shown below.
var c = Number(first) + Number(second);
It should be document.getElementById("txtresult").value= result;
You are setting the value of the textbox to the result. The id="txtresult"
is not an HTML element.
var app = angular.module('myApp', []);_x000D_
app.controller('myCtrl', function($scope) {_x000D_
_x000D_
$scope.minus = function() { _x000D_
_x000D_
var a = Number($scope.a || 0);_x000D_
var b = Number($scope.b || 0);_x000D_
$scope.sum1 = a-b;_x000D_
// $scope.sum = $scope.sum1+1; _x000D_
alert($scope.sum1);_x000D_
}_x000D_
_x000D_
$scope.add = function() { _x000D_
_x000D_
var c = Number($scope.c || 0);_x000D_
var d = Number($scope.d || 0);_x000D_
$scope.sum2 = c+d;_x000D_
alert($scope.sum2);_x000D_
}_x000D_
});
_x000D_
<head>_x000D_
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<div ng-app="myApp" ng-controller="myCtrl">_x000D_
<h3>Using Double Negation</h3>_x000D_
_x000D_
<p>First Number:_x000D_
<input type="text" ng-model="a" />_x000D_
</p>_x000D_
<p>Second Number:_x000D_
<input type="text" ng-model="b" />_x000D_
</p>_x000D_
<button id="minus" ng-click="minus()">Minus</button>_x000D_
<!-- <p>Sum: {{ a - b }}</p> -->_x000D_
<p>Sum: {{ sum1 }}</p>_x000D_
_x000D_
<p>First Number:_x000D_
<input type="number" ng-model="c" />_x000D_
</p>_x000D_
<p>Second Number:_x000D_
<input type="number" ng-model="d" />_x000D_
</p>_x000D_
<button id="minus" ng-click="add()">Add</button>_x000D_
<p>Sum: {{ sum2 }}</p>_x000D_
</div>
_x000D_
You made a simple mistake. Don't worry....
Simply use getElementById
instead getElementsById
true
var first_number = parseInt(document.getElementById("Text1").value);
False
var first_number = parseInt(document.getElementsById("Text1").value);
Thanks ...
var first_number = parseInt(document.getElementById("Text1").value);
var second_number = parseInt(document.getElementById("Text2").value);
// This is because your method .getElementById has the letter 's': .getElement**s**ById
When you assign your variables "first_number" and "second_number", you need to change "document.getElementsById" to the singular "document.getElementById".
Source: Stackoverflow.com