Javascript 如何在一个文本框中连接两个或多个文本框值_Javascript_Html

Javascript 如何在一个文本框中连接两个或多个文本框值

javascript html

Javascript 如何在一个文本框中连接两个或多个文本框值,javascript,html,Javascript,Html,我想在一个文本框中连接两个或多个文本框值。在这里，我使用id获取值，但该id将被动态添加，这意味着文本框将被动态添加。对于动态添加文本框，我使用For loop，但仅获取值最后一个文本框值，因为For loop已执行。我需要所有文本框价值观。请帮我把我弄出来。提前谢谢你以下是动态文本框过程的代码： <input type="text" maxlength="1" id="1" onkeyup="sum();"/> <input type="text" maxlength="

我想在一个文本框中连接两个或多个文本框值。在这里，我使用id获取值，但该id将被动态添加，这意味着文本框将被动态添加。对于动态添加文本框，我使用For loop，但仅获取值最后一个文本框值，因为For loop已执行。我需要所有文本框价值观。请帮我把我弄出来。提前谢谢你

以下是动态文本框过程的代码：

<input type="text" maxlength="1" id="1"  onkeyup="sum();"/>
<input type="text" maxlength="1" id="2"  onkeyup="sum();"/>
<input type="text" maxlength="1" id="3"  onkeyup="sum();"/>
<input type="text"  id="4"/>

function sum() {
   var txtFirstNumberValue = document.getElementById('1').value;
   var txtSecondNumberValue = document.getElementById('2').value;
   var txtThirdNumberValue = document.getElementById('3').value;
   var result = txtFirstNumberValue + txtSecondNumberValue + txtThirdNumberValue;
   if (isNaN(result)) {
      document.getElementById('4').value = result;       
   }                        
}

在本例中，我使用servlet中的printwriter对象

int nums=5;
out.println("<input type='text' id='static'>");

int i;
for (i=0;i<nums; i++) {  
    out.println("<input type='text' Style='width:30px' maxlength='1' id='id"+i+"'onkeyup='sum();'> ");                  

    out.println("<script>function sum(){ alert('id"+i+"'); var txtFirstNumberValue=document.getElementById('id'+i+'').value;var result = document.getElementById('static').value + txtFirstNumberValue;alert(result);if (isNaN(result)){ document.getElementById('static').value = result; }}</script>");
}

int nums=5；
out.println（“”）；
int i；
对于（i=0；i我不会使用内联JavaScript，如果我真的需要元素，我会给它们适当的ID，否则我会使用类

$（文档）.ready（函数（）{
$（'.in'）。在（'input'，function（）上{
var allvals=$（'.in'）.map（函数（）{
返回此.value；
}).get（）.join（“”）；
$（'.out'）.val（所有val）；
});
})；


$（文档）.ready（函数（）{
var cls=document.getElementsByClassName（'test'）；
var i=0；
var len=cls.长度；
var-tot=0；
对于（i=0；i
$（文档）.ready（函数（）{
$（'.in'）。在（'input'，function（）上{
var allvals=$（'.in'）.map（函数（）{return this.value；}）.get（）.join（''）；
$（'.out'）.val（所有val）；
});
})；


$（文档）.ready（函数（）{
$（'.in'）。在（'input'，function（）上{
var allvals=$（'.in'）.map（函数（）{
返回此.value；
}).get（）.join（“”）；
$（'.out'）.val（所有val）；
});
})；

您可以向所有文本框中添加一个类，然后通过文档在脚本中访问它们。GetElementsByCassName要循环列表，您可以获取每个元素的属性以获得最终值文本框似乎不是动态添加的；动态添加通常意味着在DOM ready
事件之后添加内容。请如果我弄错了，请纠正我。您在javascript中使用的是System.out.println
。我认为这不是有效的javascript。请尝试使用document.write（）取而代之。***当问题还不清楚时，为什么要投票？我有什么遗漏吗？@PeterKA我定义nums=5只是为了让您理解。nums值实时动态变化太好了！很高兴我能提供帮助。您能补充一个简短的解释吗？
    <script type="text/javascript">
        $(document).ready(function(){
            var cls = document.getElementsByClassName('test');
            var i =0;
            var len = cls.length;
            var tot = 0;
            for(i=0;i<l;i++){
                var cur = cls[i].value;
                tot = parseInt(cur)+tot;
            }
            //document.getElementById("id"+cls.length).value = tot; //set the value for last element as the tot var
        });
    </script>

<body>
    <input type="text" maxlength="1" value="1" id="1" class="test"/>
    <input type="text" maxlength="1" value="2" id="2" class="test"/>
    <input type="text" maxlength="1" value="3" id="3" class="test"/>
</body>