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

我无法弄清楚如何使用oninput或onchange方法更改表单域值。例如，我需要让一个输入字段在另一个输入字段被更改后立即更改其值。所以我想：JavaScript - 如何更改输入和更改字段值

<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子句）更改下拉列表的值。由于上面的简单脚本已经不能工作，我甚至不知道如何处理第二个脚本......

来源

2017-09-26 cata

您必须在$(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="" />

来源

2017-09-26 20:02:09

这里有几个问题;第一个要理清的地方就是你声明你的函数的地方。 JavaScript有一个概念范围，你可以把它看作是声明变量的容器。你的功能没有做任何事情的原因是因为updateInput的定义被锁定在你的jquery $(document).ready范围内。

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

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

来源

2017-09-26 19:59:40 jack

你的功能是不明确的标记，因为它传递给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=""/>

来源

2017-09-26 19:59:52

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

回答

相关问题