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

Question

I can't figure out how to change form field values with the oninput or the onchange method. For example, I need to make one input field to change its value as soon as another input field is being changed. So I'm trying:

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

It doesn't do anything. What am I doing wrong?

In another case, I need to change the value of a drop-down according to another drop-down (with an if clause). Since the simple script above doesn't work already, I don't even have a clue what to do about the second one...

Answer 1

There are a few issues here; the first one to sort out is where you're declaring your functions. Javascript has a concept of scope , which you can think of as kind of a container for declared variables. The reason your function isn't doing anything is because the definition of updateInput is locked away inside your jquery $(document).ready scope.

Once you take that definition out of the jquery wrapper, it's available to the global window scope - which is the one you're accessing in your oninput . I should point out that there are more flexible/useful ways to put an event listener on something, but what you have will work, if this is a simple use case.

 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

Your function is undefined in the markup, because it is passed to the ready and scoped there. It will better to not pass the update function to the ready , but create inside it and attach that function to the input from code. Don't get every time the DOM elements, instead get once and use variables to keep them.

Also you have mixed jQuery approach with pure Javascript approach. I think it will be better to use one of them.

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

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

You have to define the updateInput() function outside of $(document).ready() , so that you can call it from the rest of your code, otherwise it is only scoped in there.

Secondly, the argument the function takes is never used, so I took the liberty of removing it.

Thirdly, to call this function as soon as the page is loaded, just call it inside $(document).ready() and you are good to go.

Here's a working example:

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