Question

我无法弄清楚如何使用oninput或onchange方法更改表单字段值。例如，我需要创建一个输入字段，以便在更改另一个输入字段时立即更改其值。所以我在尝试：

<input type="number" id="a" value="999.99" oninput="updateInput(value)"/>
<input type="number" id="b" value=""/>

<script>
    $(document).ready(function updateInput(value) {
        document.getElementById("b").value = document.getElementById("a").value;
    });
</script>

它没有做任何事情。我究竟做错了什么？

在另一种情况下，我需要根据另一个下拉列表（使用if子句）更改下拉列表的值。由于上面的简单脚本不起作用，我甚至不知道如何处理第二个......

Answer 1

这里有一些问题;第一个要理清的是你要宣布你的职能。 Javascript有 scope 的概念，您可以将其视为声明变量的容器类型。你的函数没有做任何事情的原因是因为updateInput的定义被锁定在你的jquery $(document).ready范围内。

从jquery包装器中取出该定义后，它可用于全局窗口范围 - 您可以在oninput中访问该范围。我应该指出，有一些更灵活/有用的方法可以将事件监听器放在某个东西上，但如果这是一个简单的用例，那么你所拥有的东西将起作用。

＆＃13;

function updateInput(value) {
    document.getElementById("b").value = document.getElementById("a").value;
}

＆＃13;

 <input type="number" id="a" value="999.99" oninput="updateInput(value)"/>
 <input type="number" id="b" value=""/>

＆＃13;

Answer 2

您的功能在标记中未定义，因为它被传递到ready并在那里作用域。最好不要将update函数传递给ready，而是在其中创建并将该函数从代码附加到input。不要每次都获取DOM元素，而是使用变量来保留它们。

此外，您采用混合jQuery方法和纯Javascript方法。我认为最好使用其中一个。

使用jQuery

$(document).ready( function() { 

   const aInput = $("#a");
   const bInput = $("#b");
   
   aInput.on('input', function () {
       bInput.val(aInput.val());
   });

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="a" value="999.99"/>
<input type="number" id="b" value=""/>

使用纯Javascript

window.onload = function() {

   const aInput = document.getElementById("a");
   const bInput = document.getElementById("b");
   
   aInput.addEventListener('input', function() {
       bInput.value = aInput.value;
   });

};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="a" value="999.99"/>
<input type="number" id="b" value=""/>

Answer 3

您必须在updateInput()之外定义$(document).ready()函数，以便您可以从其余代码中调用它，否则它只限于那里。

其次，函数所使用的参数从未使用过，所以我冒昧地删除它。

第三，要在加载页面后立即调用此函数，只需在$(document).ready()内调用它，你就可以了。

这是一个有效的例子：

＆＃13;

function updateInput() {
  document.getElementById("b").value = document.getElementById("a").value;
}

$(document).ready(updateInput());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="a" value="999.99" oninput="updateInput()" />
<input type="number" id="b" value="" />

＆＃13;

JavaScript - 如何在输入和onchange上更改字段值

3 个答案: