如何在Javascript中两次使用相同的passValue函数

How can I use the same passValue function twice in Javascript?

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

我想在两个点中传递输入字段的值。但我的代码只会传递一次。有没有办法重写它，让它再次出现在代码中？

//HTML:
<input type="text" name="amount" onchange="passValue(this, 'preview_amount')"/>
//Outputs first value
<span id="preview_amount"></span>
//Outputs Nothing
<span id="preview_amount"></span>
//Javascript:
function passValue(e, target){
    document.getElementById(target).innerHTML = e.value;
}

您的id必须是唯一的。试试这个。。。它可能会起作用。

//HTML:
<input type="text" name="amount" onchange="passValue(this, 'preview_amount1', 'preview_amount2');"/>
//Outputs first value
<span id="preview_amount1"></span>
//Outputs Nothing
<span id="preview_amount2"></span>
//Javascript:
function passValue(e){
    for(var i = 1; i < arguments.length; ++i){
        if (document.getElementById(arguments[i]))
            document.getElementById(arguments[i]).innerHTML = e.value;
    }
}

有了这个，您可以将任意数量的id传递给passValue函数，而无需更改它。

在DOM文档中不能有重复的元素id。ids必须是唯一的。

使用jquery和唯一ID，您的问题变得很简单：

<input ... onChange="passValue(this, '#preview_amount1, #preview_amount2');" />
<span id="preview_amount1"></span>
<span id="preview_amount2"></span>
function passValue(e, targets) {
   $(targets).innerHTML = e.value;
}

请注意这两个跨度的不同ID，以及这些ID是如何在onChange处理程序中传递的。

也可以试试这个。

<input type="text" id="amount">
<div class="preview_amount"></div>
<div class="preview_amount"></div>

JQUERY

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type = "text/javascript">
   $(document).ready(function() { 
      $('#id').keypress(function() { 
          $('.preview_amount').html($(this).val());
      });
   });
</script>

您可以为所有想要更新onchange的spans设置类名，然后根据这个类设置innerHTML，这样您就不必向函数传递不同的id。

Fiddle

<input type="text" name="amount" onchange="passValue(this.value)"/>
<span class="set_values_here" id="preview_amount_1"></span>
<span class="set_values_here" id="preview_amount_2"></span>
<script>
function passValue(new_value) {
    var els = document.getElementsByClassName("set_values_here");
    for(var i=0; i<els.length; i++)
    {
        document.getElementById(els[i].id).innerHTML = new_value;
    }
} 
</script>
相关文章：