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。 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，以及如何使用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

您可以为要更新的所有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>

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

4 个答案: