Javascript 一个函数返回多个文本框的结果_Javascript_Jquery_Html

Javascript 一个函数返回多个文本框的结果

javascript jquery html

Javascript 一个函数返回多个文本框的结果,javascript,jquery,html,Javascript,Jquery,Html,我是javascript新手。我已经根据更改时的文本框Id编写了代码，但是我需要通过一个函数将代码格式化为函数调用。是否可以为不同的文本框返回不同的值 HTML: <input type="text" name="a" id="1" /> <input type="text" name="b" id="2" /> <input type="text" name="result1" id="result1" /> <input type="text"

我是javascript新手。我已经根据更改时的文本框Id编写了代码，但是我需要通过一个函数将代码格式化为函数调用。是否可以为不同的文本框返回不同的值

HTML:

<input type="text" name="a" id="1"  />
<input type="text" name="b" id="2"  />
<input type="text" name="result1" id="result1" />

<input type="text" name="c" id="3"  />
<input type="text" name="d" id="4"  />
<input type="text" name="result2"  id="result2"/>

$(document).ready(function(){
    $("#result1").change(function(){
        var a = document.getElementById("a").value;
        var b = document.getElementById("b").value;
        document.getElementById("result1").value = (a+b); 
    });
    $("#result2").change(function(){
        var c = document.getElementById("c").value;
        var d = document.getElementById("d").value;
        document.getElementById("result2").value = (c+d);
    });
});

我认为统一的功能应该是-

$("#result1, #result2").change(function(){
var a = document.getElementById(this.id + "-a").value;
var b = document.getElementById(this.id + "-b").value;
this.value = (a + b); 
});

这是上下文。在事件侦听器函数中，上下文是触发事件的元素，因此当result1
触发事件时，this
将是result1
元素
关于a
和b
，您在这里混淆了名称
和id
值。如果这两个元素的ID是随机的，那么除了使用两个不同的函数外，您无法做任何稳定的事情（如果元素的顺序稍有改变，代码可能会失败）。我的建议是为他们提供适当的上下文ID，这样就不用1
或a
，而是result1-a
和result2-a
等等。然后你可以预先设置这个的ID，一切都应该正常
一般提示-ID应该以字母而不是数字开头，因为数字在CSS（3）中不匹配
至于$（“#result1，#result2”）
部分，就像BhushanKawadkar建议的那样，可以将其更改为$（“[id^=\“result\”）
，然后您不必指定每个id。您考虑过jQuery吗？然后您可以通过（例如）相同的类来选择元素。
所以如果我是你，我会这样做
<textarea class="textbox">ABC</textarea>
<textarea class="textbox">DFC</textarea>

此处的工作示例：
然后在更改任何内容后-它将返回其值
注：这可以用于任何字段：输入、选择等。jQuery意味着乐趣；）。
您可以使用如下所示的“从开始”jQuery选择器
在这里，它将触发id
的所有输入文本的更改事件，该事件以result
开头，即result1
，result2
等等
它将获取前面两个文本框的值…并将总和指定给结果框
$(document).ready(function(){
$("[id^='result']").change(function(){
  var value1 = $(this).before().val();
  var value2 = $(this).before().before().val();
    $(this).val(value1+value2);
});
});

但若您遵循相关的ID或类，那个么您就可以很容易地做到这一点，尽管您正在更改html元素的位置
考虑以下代码，其中指定了与结果文本框相关的特定id：
<input type="text" name="a" id="first_1"  />
<input type="text" name="b" id="second_1"  />
<input type="text" name="result1" id="result_1" class="result" />

<input type="text" name="c" id="first_2"  />
<input type="text" name="d" id="second_2"  />
<input type="text" name="result2"  id="result_2" class="result"/>

请看一下Html
<input type="text" name="a" id="1"  />
<input type="text" name="b" id="2"  />
<input type="text" name="result1" id="result1" class="result" />

<input type="text" name="c" id="3"  />
<input type="text" name="d" id="4"  />
<input type="text" name="result2"  id="result2" class="result"/>

我不确定您为什么要监听结果框的更改事件。它应该绑定到值框
如果您想要一个函数来完成这一切，您可以将一个类名设置为all value box，然后监听它的更改事件
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$(".num-box").change(function(){
    if ($(this).hasClass('type1')) {
        var a = $("[name=a]").val();
        var b = $("[name=b]").val();
        $("[name=result1]").val(parseInt(a)+parseInt(b));
    } else if ($(this).hasClass('type2')) {
        var c = $("[name=c]").val();
        var d = $("[name=d]").val();
        $("[name=result2]").val(parseInt(c)+parseInt(d));
    }
});
});
</script>
</head>
<body>
<input type="text" name="a" class="num-box type1" value=0 />
<input type="text" name="b" class="num-box type1" value=0 />
<input type="text" name="result1" />
<input type="text" name="c" class="num-box type2" value=0 />
<input type="text" name="d" class="num-box type2" value=0 />
<input type="text" name="result2" />
</body>
</html>


提供头衔
$（文档）.ready（函数（）{
$（“.num框”）.change（函数（）{
if（$（this）.hasClass（'type1'））{
var a=$（“[name=a]”）.val（）；
var b=$（“[name=b]”）.val（）；
$（“[name=result1]”）val（parseInt（a）+parseInt（b））；
}else if（$（this）.hasClass（'type2'））{
var c=$（“[name=c]”）.val（）；
var d=$（“[name=d]”）.val（）；
$（“[name=result2]”）val（parseInt（c）+parseInt（d））；
}
});
});
看起来您误解了name
和id
。首先，id
不能以数字开头。其次，getElementById
按id（而不是名称）获取元素。第三，如果您想使用jQuery，应该使用$（'.\a'）.val（）
或$（'[name=a]'））
而不是document.getElementById（'a'）。value
@h2ooooooid不能以数字开头
它可以在兼容HTML5的浏览器（和doctype）中使用，但不应该，因为CSS3仍然不支持它；）{CSS4将}您最好重新考虑HTML标记的逻辑，使用一些容器和类，而不是IDS。您应该使用$（“[name=a]，[name=b]”）绑定事件，而不是$（“#result1”）@a.Wolff不知道这一点-为什么他们要更新HTML5标准而不发布早期版本的CSS4（CSS3.5？）支持它？！我想不出一个网站不使用CSS。但这两个函数应该输出到不同的元素？我添加了一个解释。第一个函数添加a+b，第二个添加c+d，这一事实如何？我没有注意到，我会相应地更改答案。我只需要一个函数，例如calc（）{它应该调用要添加的两个值并显示在相应的文本框中}您的示例与手头的问题并不相关。虽然有效，但由于对结构的依赖，这些解决方案是脆弱的。如果元素移动，整个过程就会中断。但这适用于给定的结构，如果结构不固定，则没有人能给出通用解决方案。那么应该有一些类模式用于ide识别html元素…这不是错误的答案。让@Navaneetha Krishnan来决定这是否有用…否决票并不意味着它一定是错误的。我认为它太脆弱了，其他人可能不同意。海报可以决定他们想要什么，不管我的评论或否决票。如果没有否决票，那么每个答案都是脆弱的y特定的html模式（可能使用结构、css等）…您能给我一个解决方案吗…ID不太可能被更改，逻辑容器不太可能被更改，但顺序更可能被更改。
<input type="text" name="a" id="1"  />
<input type="text" name="b" id="2"  />
<input type="text" name="result1" id="result1" class="result" />

<input type="text" name="c" id="3"  />
<input type="text" name="d" id="4"  />
<input type="text" name="result2"  id="result2" class="result"/>

$('.result').blur(function(){
var result;
    if($(this).attr("id")=="result1")
    {
        result=parseInt($('#1').val())+parseInt($('#2').val());
       $(this).val(result);

    }
    else if($(this).attr("id")=="result2")
    {
        result=parseInt($('#3').val())+parseInt($('#4').val());
      $(this).val(result);
    }
});

<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$(".num-box").change(function(){
    if ($(this).hasClass('type1')) {
        var a = $("[name=a]").val();
        var b = $("[name=b]").val();
        $("[name=result1]").val(parseInt(a)+parseInt(b));
    } else if ($(this).hasClass('type2')) {
        var c = $("[name=c]").val();
        var d = $("[name=d]").val();
        $("[name=result2]").val(parseInt(c)+parseInt(d));
    }
});
});
</script>
</head>
<body>
<input type="text" name="a" class="num-box type1" value=0 />
<input type="text" name="b" class="num-box type1" value=0 />
<input type="text" name="result1" />
<input type="text" name="c" class="num-box type2" value=0 />
<input type="text" name="d" class="num-box type2" value=0 />
<input type="text" name="result2" />
</body>
</html>