JavaScript - comment modifier les valeurs de champs oninput et onchange

Question

Je n'arrive pas à comprendre comment modifier les valeurs de champs de formulaire avec la méthode oninput ou onchange. Par exemple, j'ai besoin de faire un champ de saisie pour changer sa valeur dès qu'un autre champ d'entrée est modifié. Donc j'essaye:

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

Il ne fait rien. Qu'est-ce que je fais mal?

Dans un autre cas, je dois modifier la valeur d'une liste déroulante en fonction d'une autre liste déroulante (avec une clause if). Depuis le script simple ci-dessus ne fonctionne pas déjà, je n'ai même pas la moindre idée de ce qu'il faut faire à propos de la seconde ...

Answer 1

Vous devez définir la fonction updateInput() en dehors de $(document).ready(), de sorte que vous puissiez l'appeler à partir du reste de votre code, sinon il est uniquement visible ici. Deuxièmement, l'argument que la fonction prend n'est jamais utilisé, donc j'ai pris la liberté de l'enlever. Troisièmement, pour appeler cette fonction dès que la page est chargée, il suffit de l'appeler $(document).ready() et vous êtes prêt à partir.

Voici un exemple de travail:

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

Answer 2

Il ya quelques problèmes ici; le premier à trier est l'endroit où vous déclarez vos fonctions. Javascript a un concept de portée, que vous pouvez considérer comme une sorte de conteneur pour les variables déclarées. La raison pour laquelle votre fonction ne fait rien est parce que la définition de updateInput est verrouillée dans votre portée jquery $(document).ready. Une fois que vous avez sorti cette définition de l'enveloppe jquery, elle est disponible pour la portée globale de la fenêtre - qui est celle à laquelle vous accédez dans votre oninput. Je dois souligner qu'il existe des moyens plus flexibles/utiles pour mettre un écouteur d'événement sur quelque chose, mais ce que vous avez fonctionnera, s'il s'agit d'un cas d'utilisation simple.

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 3

Votre fonction n'est pas défini dans le balisage, car il est passé à la ready et scope là. Il vaudra mieux ne pas passer la fonction update au ready, mais créer à l'intérieur et attacher cette fonction au code input. N'obtenez pas à chaque fois les éléments DOM, mais obtenez une fois et utilisez des variables pour les conserver.

Vous avez également une approche mixte jQuery avec une approche pure Javascript. Je pense qu'il vaudra mieux en utiliser un.

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

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