Javascript或Jquery数学函数

Javascript or Jquery Math Functions

本文关键字：函数 Jquery Javascript      更新时间：2023-09-26

如何使用这些JavaScript或jquery的数学函数

例如，我想计算表单中所有值的总和，而不提交表单或单击按钮。我有4个输入字段，我想添加它们并将它们的结果放在另一个输入或段落中。
Html代码看起来像这样:

<form id='myform'>
    <label> Number 1 : </label><input value="" id="1"/><br>
    <label> Number 2 : </label><input value="" id="2"/><br>
    <label> Number 3 : </label><input value="" id="3"/><br>
    <label> Number 4 : </label><input value="" id="4"/><br> <br>
    <button href="#" class='add'> ADD</button> 
    <p id="p"> </p>
</form>

我试着这样做:

var one   = $("#1").val();
var two   = $("#2").val(); 
var three = $("#3").val();
var four  = $("#4").val(); 
$("add").on("click", function(){
    var sum = one + two + three + four;
    $('p').text(sum);        
})

我创建了一个jsfiddle:示例你能帮个小忙吗?谢谢你。

改成这个…

$(".add").on("click", function(){
    var one   = parseInt($("#1").val(), 10);
    var two   = parseInt($("#2").val(), 10); 
    var three = parseInt($("#3").val(), 10);
    var four  = parseInt($("#4").val(), 10); 
    var sum = one + two + three + four;
    $("p").text(sum);        // or $("#p") since you gave it an ID
});

这样你就可以在点击"添加"时得到值，你还需要parseInt()将值转换为整数，否则它们将被视为字符串并连接起来。

顺便提一下，不建议使用数字作为元素id。在它们前面加上一个通用的名字是个好主意，比如#value1、#value2等。

你的标记也有一个小问题，我修复了…

<form id='myform'>
    <label> Number 1 : </label><input value="" id="1"/><br>
    <label> Number 2 : </label><input value="" id="2"/><br>
    <label> Number 3 : </label><input value="" id="3"/><br>
    <label> Number 4 : </label><input value="" id="4"/><br> <br>
    <button type="button" class="add">ADD</button> 
    <p id="p"> </p>
</form>

button元素默认是一个提交按钮，除非您指定了type="button"，否则它会导致页面提交，而不仅仅是处理按钮单击。您可以使用click事件处理程序来停止此操作，但我更喜欢设置按钮类型。

下面是工作示例…

https://jsfiddle.net/fs5ysde1/17/

如果您想将其添加为数字，则在每个之前添加+以将其转换为数字，如+$("#1").val(); 

$(".add").on("click", function(e){
        e.preventDefault();
        var one   = +$("#1").val();
        var two   = +$("#2").val(); 
        var three = +$("#3").val();
        var four  = +$("#4").val(); 
        var sum = one + two + three + four;
        $('#p').text(sum);        
    })

我知道我们有我们的答案，但我想我应该展示一个不同的方法:-)

// get all the fields in one go
var $fields = $('#myform input');
$('.add').click(function(e){
    // kill the form submission
    e.preventDefault();
    var total = 0;
    $fields.each(function(pos, el) {
        // get the the vals, and, if blank, default to 0
        total += parseInt($(el).val()) || 0;
    });
    $('p').text(total);
});
相关文章：