尝试将文本字段中输入的两个数字相乘，并使用jquery提示答案

Trying to multiple two numbers entered in text fields and alert the answer using jquery

本文关键字：数字 答案 提示 jquery 两个 字段 文本 输入      更新时间：2023-09-26

javascript和jquery非常新。我尝试了一个练习，并想出了这个代码，我希望它能把用户输入的两个数字输入到文本字段中，点击乘法按钮，它会提醒（）答案。

<body>
<script>
    $(document).ready(function(){
        var first = $('#first').value;
        var second = $('#second').value;
        $('#multiply').click(function(){
            alert(first*second);
        }); // end click
    }); // end ready
</script>
First Number: 
<input type="text" id="first"><br >
Second Number: 
<input type="text" id="second"><br >
<input type="button" id="multiply" value="Multiply">
<input type="button" id="divide" value="Divide">
</body>

我建议：

$(document).ready(function(){
    $('#multiply').click(function(){
        var first = parseFloat($('#first').val());
        var second = parseFloat($('#second').val());
        console.log(first*second);
    }); // end click
}); // end ready
  • CCD_ 1用于从jQuery对象（或jQuery集合的第一个元素的值）获得CCD_
  • parseFloat()用于将<input/>元素的字符串转换为数字

顺便说一句，我使用console.log()，而不是window.alert()，以减少用户的沮丧。但是，很明显，可以根据自己的喜好进行更改（但登录控制台不需要用户执行任何操作）。

参考文献：

  • JavaScript：
    • parseFloat()
  • jQuery：
    • val()

jQuery对象中没有value属性，请使用val()0方法从输入中获取值：

var first = $('#first').val();
var second = $('#second').val();

现在你有了在页面加载时获取值的代码，但你应该在点击时获取值：

$(document).ready(function(){
    $('#multiply').click(function(){
        var first = $('#first').val();
        var second = $('#second').val();
        alert(first * second);
    }); // end click
}); // end ready

在进行乘法运算时，您使用的是从字符串到数字的隐式转换。您可能想要显式解析字符串，最好确保数据的类型正确，而不是依赖于隐式转换。例如，如果您想添加数字，则隐式转换在那里不起作用，因为+运算符也用于连接字符串。使用parseInt或parseFloat方法将字符串解析为数字。示例：

var first = parseInt($('#first').val(), 10);
var second = parseInt($('#second').val(), 10);

获取文本字段的值时，结果是文本。不是数字。您可以使用（全局可用的）parseFloat函数将值解析为数字（如果数字没有小数，则使用parseInt函数）。

var first = parseFloat($("#first").val());
var second = parseFloat($('#second').val());

$（'#first'）是一个jQuery对象，因此应该使用.val（）方法。另一方面，您在DOM准备就绪时设置变量，因此在用户单击时不会更新它。

$(document).ready(function () {
    var first, second;
    $('#multiply').click(function () {
        first  = $('#first').val();
        second = $('#second').val();
        alert(first * second);
    });
});

在其他方面，脚本标记应该位于正文的末尾。脚本解析是同步的，因此浏览器需要更多的时间来准备DOM。玩得开心！：）

相关文章：