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

Question

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

//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;
} 

Answer 1

您的 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运行，而无需更改它。

Answer 2

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

小提琴

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

Answer 3

也试试这个。

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

查询

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

Answer 4

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

使用 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;
}

注意两个 span 的不同 ID，以及这些 ID 如何通过 onChange 处理程序传递。