如何在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

您不能在DOM文檔中包含重復的元素id 。 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;
}

請注意兩個跨距的不同ID，以及如何使用onChange處理程序傳遞這些ID。

Answer 3

也試試這個。

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

Answer 4

您可以為要在onchange上更新的所有spans設置類名，然后根據此類設置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>