Javascript 创建一个简单的计算器函数_Javascript_Jquery_Html

Javascript 创建一个简单的计算器函数

javascript jquery html

Javascript 创建一个简单的计算器函数,javascript,jquery,html,Javascript,Jquery,Html,我试图创建一个简单的计算器函数，但我没有得到显示的值。我知道我遗漏了什么，但不确定到底是什么。现在，我只研究加法，将研究其他（乘法、减法和除法）。我的HTML代码如下： <!DOCTYPE html> <html lang="en"> <head> <title> Simple Calculator </title>

我试图创建一个简单的计算器函数，但我没有得到显示的值。我知道我遗漏了什么，但不确定到底是什么。现在，我只研究加法，将研究其他（乘法、减法和除法）。我的HTML代码如下：

    <!DOCTYPE html>
        <html lang="en">
            <head>
                <title> Simple Calculator </title>
                    <meta charset="utf-8">
                        <script src="js/jquery-3.4.1.js"></script>
                        <script src="js/assignment03.js"></script>



            </head>

                <body>

                     <h1>Calculator</h1>
                        <label for="num1">Number1</label>
                        <br>
                        <input id="num1" name="num1" type="text" value="0"/>
                        <br>
                        <label for="num2">Number 2</label>
                        <br>
                        <input id="num2" name="num2" type="text" value="0"/>
                        <br>
                        <br>
                            <a id="action" href="#">Click Here to Calculate </a>


                                <div>The result of adding the numbers is: <span id="result-add"></span></div>


                </body>

        </html>

$(document).ready(function() {
    $('#action').click(function() {
    //DO NOT CHANGE CODE BELOW
        var num1 = parseInt($('#num1').val());
        var num2 = parseInt($('#num2').val());
        clear();
        addNumbers(num1, num2);
        var result = multiplyNumbers(num1, num2);
        $('#result-mult').text(result);
    //DO NOT CHANGE CODE ABOVE

    });

    /*
     Below this comment, create a function 
     named addNumbers, which accepts two parameters.
     The function should add the two parameters together
     and write the result to the element with the id
     result-add
    */
function addNumbers (num1, num2) {
    var retVal = num1 + num2;
    retVal = ("#result-add");
    return retVal;

};

如有任何见解，将不胜感激。

您希望设置元素的

innerHTML

属性。在jQuery中，您可以使用

文本

$("#result-add").text(retVal);

如果函数的唯一目的是创建在元素中设置文本的副作用，则也不需要从函数中返回。

尝试按如下方式更改js代码：

$(document).ready(function() {
    $('#action').click(function(event) {
        event.preventDefault();
    //DO NOT CHANGE CODE BELOW
        var num1 = parseInt($('#num1').val());
        var num2 = parseInt($('#num2').val());
        let result = addNumbers(num1, num2);

        $('#result-add').text(result);
    //DO NOT CHANGE CODE ABOVE

    });

    /*
     Below this comment, create a function 
     named addNumbers, which accepts two parameters.
     The function should add the two parameters together
     and write the result to the element with the id
     result-add
    */
            function addNumbers (num1, num2) {
                var retVal = num1 + num2;
                return retVal;

            }
            })

当前代码中未定义clear（）和multiplyNumbers（），因此会给出一个错误，您可以通过其函数**$（“#result add”）.html（retVal）**设置添加结果。

$（文档）.ready（函数（）{
$（“#操作”）。单击（函数（）{
//不要更改下面的代码
var num1=parseInt（$（'#num1'）.val（））；
var num2=parseInt（$（'#num2'）.val（）；
//清除（）；
addnumber（num1，num2）；
//var结果=多个整数（num1，num2）；
//$（'#result mult'）。文本（结果）；
//不要更改上面的代码
});
/*
在这个注释下面，创建一个函数
命名为addNumbers，它接受两个参数。
该函数应将这两个参数相加
并将结果写入id为的元素
结果添加
*/
})
函数addnumber（num1，num2）{
var retVal=num1+num2；
$（“#结果添加”）.html（retVal）；
};

简易计算器
计算器
第一




二号






将这些数字相加的结果是：