JavaScript

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 包装器中取出该定义，它就可用于全局 window 范围 - 这是您在 oninput 中访问的范围。我应该指出，有更多 flexible/useful 方法可以将事件侦听器放在某物上，但如果这是一个简单的用例，您所拥有的将起作用。

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

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

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

您必须在 $(document).ready() 之外定义 updateInput() 函数，以便您可以从代码的其余部分调用它，否则它只会在其中起作用。

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

第三，要在页面加载后立即调用此函数，只需在 $(document).ready() 中调用即可。

这是一个工作示例：

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

$(document).ready(updateInput());

<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="" />

JavaScript - 如何更改字段值 oninput 和 onchange

JavaScript - how to change field values oninput and onchange

jquery

onchange