添加两个数字并在带有 Javascript 的文本框中显示结果

Question

我只是想写一个简单的 javascript 程序来演示如何从文本字段中获取用户输入，然后单击按钮将在另一个文本字段中显示这些数字的总和结果。但不幸的是，下面的代码不起作用。单击该按钮不会在结果文本字段中显示任何内容。

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

Answer 1

这里是工作 fiddle：http://jsfiddle.net/sjh36otu/

        function add_number() {

            var first_number = parseInt(document.getElementById("Text1").value);
            var second_number = parseInt(document.getElementById("Text2").value);
            var result = first_number + second_number;

            document.getElementById("txtresult").value = result;
        }

Answer 2

当您分配变量 "first_number" 和 "second_number" 时，您需要将 "document.getElementsById" 更改为单数 "document.getElementById"。

Answer 3

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

Answer 4

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

Answer 5

你犯了一个简单的错误。不用担心.... 只需使用 getElementById 代替 getElementsById

真

var first_number = parseInt(document.getElementById("Text1").value);

假

var first_number = parseInt(document.getElementsById("Text1").value);

谢谢...

Answer 6

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

    $scope.minus = function() {     

     var a = Number($scope.a || 0);
            var b = Number($scope.b || 0);
            $scope.sum1 = a-b;
    // $scope.sum = $scope.sum1+1; 
    alert($scope.sum1);
    }

   $scope.add = function() {     

     var c = Number($scope.c || 0);
            var d = Number($scope.d || 0);
            $scope.sum2 = c+d;
    alert($scope.sum2);
    }
});

<head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
   </head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
     <h3>Using Double Negation</h3>

    <p>First Number:
        <input type="text" ng-model="a" />
    </p>
    <p>Second Number:
        <input type="text" ng-model="b" />
    </p>
    <button id="minus" ng-click="minus()">Minus</button>
    <!-- <p>Sum: {{ a - b }}</p>  -->
 <p>Sum: {{ sum1 }}</p>

    <p>First Number:
        <input type="number" ng-model="c" />
    </p>
    <p>Second Number:
        <input type="number" ng-model="d" />
    </p>
 <button id="minus" ng-click="add()">Add</button>
    <p>Sum: {{ sum2 }}</p>
</div>

Answer 7

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

Answer 8

您可以使用 JavaScript 中的 Number 基本类型简单地转换给定的数字，如下所示。

var c = Number(first) + Number(second);

Answer 9

应该是document.getElementById("txtresult").value= result;

您正在将文本框的值设置为结果。 id="txtresult" 不是 HTML 元素。

Answer 10

<script>
       var text1 = document.getElementById("Text1").value;
       var text2 = document.getElementById("Text2").value;
       var answer = parseInt(text1) + parseInt(text2);
      function add_number(){
       document.getElementById("txtresult").value = answer;
       }
</script>

Answer 11

它不是 document.getElementsById 功能它 document.getElementById 试一试

Answer 12

而不是写作

.innerHTML = result;

使用

.value = result;

Answer 13

<html lang = "en">              
        <head>  
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Calculator DEMO</title>  
                    
        </head> 
        
    <body> 
                
        <div>

            <p>
                <label>Enter Number 1: </label><br>
                    <input type="number" id="txt1" name="text1"><br/>
                <label>Enter Number 2: </label><br>
                    <input type="number" id="txt2" name="text2">

            </p>

            <p>
                <button onclick="resultsum()">+</button>
            
                <button onclick="resultsub()">-</button>
            
                <button onclick="resultmul()">*</button>
            </p>
            
            <p>
                <button onclick="resultdiv()">/</button>
            
                <button onclick="resultmod()">%</button>
            
                <button onclick="resultper()">percentage</button>
            </p>
        
            <script>
                        
                function resultsum()
                    {  
                        var y = parseInt(document.getElementById("txt1").value);
                        var z = parseInt(document.getElementById("txt2").value);
                        var sm = y + z;
                        document.getElementById("resultsum").innerHTML = sm;
                        
                            if(document.getElementById("resultsum").innerHTML%2!=0)
                            {
                                alert('"calculated Result is odd"');    
                            }
                            else
                            {
                                alert('"calculated Result is not "ODD"');
                            }
                    }
                function resultsub()
                    {
                        var y = parseInt(document.getElementById("txt1").value);
                        var z = parseInt(document.getElementById("txt2").value);
                        var sb = y - z;

                        document.getElementById("resultsub").innerHTML = sb;
                            {
                                if(document.getElementById("resultsub").innerHTML%2!=0)
                                {
                                    alert('"calculated Result is odd"');
                                }
                                else
                                {
                                    alert('"calculated Result is not "ODD"');
                                }
                            }
                    }
                    function resultmul()
                    {  
                        var y = parseInt(document.getElementById("txt1").value);
                        var z = parseInt(document.getElementById("txt2").value);
                        var ml = y * z;
                        document.getElementById("resultmul").innerHTML = ml;
                        
                            if(document.getElementById("resultmul").innerHTML%2!=0)
                            {
                                alert('"calculated Result is odd"');    
                            }
                            else
                            {
                                alert('"calculated Result is not "ODD"');
                            }
                    }
                    function resultdiv()
                    {  
                        var y = parseInt(document.getElementById("txt1").value);
                        var z = parseInt(document.getElementById("txt2").value);
                        var dv = y / z;
                        document.getElementById("resultdiv").innerHTML = dv;
                        
                            if(document.getElementById("resultdiv").innerHTML%2!=0)
                            {
                                alert('"calculated Result is odd"');    
                            }
                            else
                            {
                                alert('"calculated Result is not "ODD"');
                            }                        
                    }
                    function resultmod()
                    {  
                        var y = parseInt(document.getElementById("txt1").value);
                        var z = parseInt(document.getElementById("txt2").value);
                        var md = y + z;
                        document.getElementById("resultmod").innerHTML = md;
                        
                            if(document.getElementById("resultmod").innerHTML%2!=0)
                            {
                                alert('"calculated Result is odd"');    
                            }
                            else
                            {
                                alert('"calculated Result is not "ODD"');
                            }
                        
                    }
                    function resultper()
                    {  
                        var y = parseInt(document.getElementById("txt1").value);
                        var z = parseInt(document.getElementById("txt2").value);
                        var per = (y + z )/2;
                        document.getElementById("resultper").innerHTML = per;
                        
                            if(document.getElementById("resultper").innerHTML%2!=0)
                            {
                                alert('"calculated Result is odd"');    
                            }
                            else
                            {
                                alert('"calculated Result is not "ODD"');
                            }
                    }
            </script>
            <input type="text" name="Answers" id="ans" >        
                <br/>
            <p id="resultsum"></p>
            <p id="resultsub"></p>
                    <p id="resultmul"></p>
                    
                    <p id="resultdiv"></p>
                <p id="resultmod"></p>
            <p id="resultper"></p>
        </div>
    </body>
</html>

添加两个数字并在带有 Javascript 的文本框中显示结果

Add two numbers and display result in textbox with Javascript

html

javascript

textbox

function