Question

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>

Answer 1

我建议：

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

val()用于从jQuery对象（或jQuery集合的第一个元素的值）获取value，
parseFloat()用于将<input/>元素'字符串转换为数字。

顺便说一句，我使用的是console.log()，而不是window.alert()，以免让用户感到沮丧。但是，显然，根据自己的喜好进行更改（但是登录到控制台不需要用户操作来解除）。

参考文献：

JavaScript的：
- parseFloat()。
jQuery的：
- val()。

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

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

尝试在文本字段中输入多个两个数字，并使用jquery提醒答案

4 个答案: