Question

我正在尝试创建一个简单的计算器功能，但是没有显示这些值。我知道我遗漏了一些东西，但不确定确切是什么。现在，我只从事加法工作，而将从事其他工作（乘法，减法和除法）。我的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>

我的Javascript代码是这样的：

$(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;

};

任何见识都会受到赞赏。

Answer 1

您要设置元素的innerHTML属性。在jQuery中，您可以使用text来做到这一点。

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

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

Answer 2

尝试如下更改您的js代码：

═══════ Exception caught by gesture ═══════════════════════════════════════════
The following NoSuchMethodError was thrown while handling a gesture:
The getter 'path' was called on null.
Receiver: null
Tried calling: path

Handler: "onTap"
Recognizer: TapGestureRecognizer#c9d89
    debugOwner: GestureDetector
    state: possible
    won arena
    finalPosition: Offset(246.8, 613.3)
    finalLocalPosition: Offset(246.8, 23.3)
    button: 1
    sent tap down

Answer 3

当前在代码中未定义 clear（）和multipleNumbers（），因此会出现错误，您可以从其函数** $（“＃result-add”）设置加法结果.html（retVal）**。

$(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;
    $("#result-add").html(retVal);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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>

创建一个简单的计算器功能

3 个答案: