Récupérer la valeur d'un INPUT avec onkeyup

Version imprimable

Bonjour à tous et à toutes,
J'aimerais récupérer les valeurs saisies dans mes input mais je n'y arrive pas du tout.
Est ce que quelqu'un peu me donner un coup de main ?
Voici mon code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
 var id_js = {"1":{"id":"1","marque":"BROTHER","num_article":"223","description_article":"BROTHER 223 - Origine VIDE","nom_image":"","tarif_rachat":"0.10"},"2":{"id":"2","marque":"CANON","num_article":"CVC37","description_article":"VIDE CANON PG37 BLACK","nom_image":"","tarif_rachat":"0.50"},"3":{"id":"3","marque":"CANON","num_article":"CVC38","description_article":"VIDE CANON CL38","nom_image":"","tarif_rachat":"0.50"},"4":{"id":"4","marque":"CANON","num_article":"CVC40","description_article":"VIDE CANON PG40 BLACK","nom_image":"","tarif_rachat":"0.50"}} ;
 
 
for (propriete in id_js) {
    document.getElementById([propriete]).innerHTML += '<div class="ligne_article"><div class="col_num_article"><strong class="txt_pt_ecran">Référence :&nbsp;</strong>' + id_js[propriete]['num_article'] + '</div>' + '<div class="col_desc"><strong class="txt_pt_ecran">Description :&nbsp;</strong>' + id_js[propriete]['description_article'] + '</div>' + '<div class="col_tarif"><strong class="txt_pt_ecran">Prix :&nbsp;</strong>'+ id_js[propriete]['tarif_rachat']+ '€</div>' + '<input name="'+ id_js[propriete]['num_article'] +'"' + 'value="0" ' +'/>' + '</div><hr class="sexy_line"/>';
}
 
document.getElementById("1").addEventListener("change", myFunction);
document.getElementById("2").addEventListener("change", myFunction);
 
function myFunction() {
  var input1 = document.getElementById("1");
  var input2 = document.getElementById("2");
  var input3 = document.getElementById("3");
  var input4 = document.getElementById("4");
  alert(input1.value);
 alert(input2.value);
}
</script>
 
<div id="1" onkeyup="myFunction()"></div>
<div id="2" onkeyup="myFunction()"></div>
<div id="3" onkeyup="myFunction()"></div>
<div id="4" onkeyup="myFunction()"></div>

21/08/2024, 14h30
mathieu

getElementById("1") va vous renvoyer la balise "div" qui n'a pas de "value".

pour accéder au champ texte, il faut ajouter "getElementsByTagName" pour avoir toutes les balises input qui sont dans le div indiqué. et ensuite [0] pour avoir la 1re balise de la liste.

Code:

var input1 = document.getElementById("1").getElementsByTagName("input")[0];

Merci pour ton aide.
Voici donc comment j'ai modifié

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
var id_js = {"1":{"id":"1","marque":"BROTHER","num_article":"223","description_article":"BROTHER 223 - Origine VIDE","nom_image":"","tarif_rachat":"0.10"},"2":{"id":"2","marque":"CANON","num_article":"CVC37","description_article":"VIDE CANON PG37 BLACK","nom_image":"","tarif_rachat":"0.50"},"3":{"id":"3","marque":"CANON","num_article":"CVC38","description_article":"VIDE CANON CL38","nom_image":"","tarif_rachat":"0.50"},"4":{"id":"4","marque":"CANON","num_article":"CVC40","description_article":"VIDE CANON PG40 BLACK","nom_image":"","tarif_rachat":"0.50"}} ;
 
 
for (propriete in id_js) {
    document.getElementById([propriete]).innerHTML += '<div class="ligne_article"><div class="col_num_article"><strong class="txt_pt_ecran">Référence :&nbsp;</strong>' + id_js[propriete]['num_article'] + '</div>' + '<div class="col_desc"><strong class="txt_pt_ecran">Description :&nbsp;</strong>' + id_js[propriete]['description_article'] + '</div>' + '<div class="col_tarif"><strong class="txt_pt_ecran">Prix :&nbsp;</strong>'+ id_js[propriete]['tarif_rachat']+ '€</div>' + '<input name="'+ id_js[propriete]['num_article'] +'"' + 'value="0" ' +'/>' + '</div><hr class="sexy_line"/>';
}
 
function myFunction() {
 var input1 = document.getElementById("1").getElementsByTagName("input")[0];
  var input2 = document.getElementById("2").getElementsByTagName("input")[1];
  var input3 = document.getElementById("3").getElementsByTagName("input")[2];
  var input4 = document.getElementById("4").getElementsByTagName("input")[3];
  alert(input1.value);
  alert(input2.value);
  alert(input3.value);
  alert(input4.value);
}
</script>
<div id="1" onkeyup="myFunction()"></div>
<div id="2" onkeyup="myFunction()"></div>
<div id="3" onkeyup="myFunction()"></div>
<div id="4" onkeyup="myFunction()"></div>

ça affiche bien le premier input mais pas les autres.
Si je rentre une valeur dans le deuxième input c'est toujours la valeur du premier qui s'affiche.

voici l'erreur TypeError:

Citation:

input2 is undefined

Il faudrait que lorsque l'on change la valeur dans le 1er input l'alert s'affiche avec la nouvelle valeur mais si je modifie le 3eme c'est celle du 3eme qui s'affiche

c'est la meme structure : un input dans ton div
il ne faut pas recuperer le Nieme input, mais bien le premier a chaque fois

Code:

1
2
3
4
var input1 = document.getElementById("1").getElementsByTagName("input")[0];
  var input2 = document.getElementById("2").getElementsByTagName("input")[0];
  var input3 = document.getElementById("3").getElementsByTagName("input")[0];
  var input4 = document.getElementById("4").getElementsByTagName("input")[0];

Merci, ça fonctionne parfaitement.
Maintenant comment faire pour que l'alert n'affiche que le input ou il y a eu un changement ?
Voici mon code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
for (propriete in id_js) {
    document.getElementById([propriete]).innerHTML += '<div class="ligne_article"><div class="col_num_article"><strong class="txt_pt_ecran">Référence :&nbsp;</strong>' + id_js[propriete]['num_article'] + '</div>' + '<div class="col_desc"><strong class="txt_pt_ecran">Description :&nbsp;</strong>' + id_js[propriete]['description_article'] + '</div>' + '<div class="col_tarif"><strong class="txt_pt_ecran">Prix :&nbsp;</strong>'+ id_js[propriete]['tarif_rachat']+ '€</div>' + '<input name="'+ id_js[propriete]['num_article'] +'"' + 'value="" ' +'/>' + '</div><hr class="sexy_line"/>';
}
 var input1 = 0;
var input2 = 0;
var input3 = 0;
var input4 = 0;
function myFunction() {
 var input1 = document.getElementById("1").getElementsByTagName("input")[0];
  var input2 = document.getElementById("2").getElementsByTagName("input")[0];
  var input3 = document.getElementById("3").getElementsByTagName("input")[0];
  var input4 = document.getElementById("4").getElementsByTagName("input")[0];
   if (input1 != "") {
    alert(input1.value);
  }
 if (input2 != "") {
    alert(input2.value);
  }
 if (input3 !="" ) {
    alert(input3.value);
  }
 if (input4 != "") {
    alert(input4.value);
  }
}

Bonjour,
tu te compliques inutilement la vie mais tout d'abord un petit rappel !

Citation:

En CSS, les identificateurs (y compris les noms d'éléments, les classes et les ID dans les sélecteurs) ne peuvent contenir que
les caractères [a-zA-Z0-9] et les caractères ISO 10646 U+00A0 et plus, plus le trait d'union (-) et le trait de soulignement (_) ;
ils ne peuvent pas commencer par un chiffre, deux traits d'union ou un trait d'union suivi d'un chiffre.

Source : https://www.w3.org/TR/CSS2/syndata.html#characters

Exemple de résultat :
Code:

1 2 3 4 5 6 7 8 // là ça marche console.log(document.getElementById("1")); //> [Chrome]div# //> [FF]<div id="1"> // là ça plante console.log(document.querySelector("#1")); //> [Chrome] DOMException: Failed to execute 'querySelector' on 'Document': '#1' is not a valid selector. //> [FF] Uncaught DOMException: Document.querySelector: '#1' is not a valid selector
Revenons à ton besoin, une fois créer dynamiquement tes éléments il te suffit de récupérer tes éléments <input> en une seule fois et de leur ajouter un écouteur sur le change.
Code:

1 2 3 4 5 6 7 // récup. des INPUT concernés const inputs = document.querySelectorAll(".ligne_article input"); inputs.forEach((input) => { input.addEventListener("change", (e) => { alert(input.value); }); });

21/08/2024, 19h58
Sergio_zero

Au top NoSmoking, comme toujours.
Merci Beaucoup.
J'essaie de faire un panier en Js, je sais le faire en php mais je me lance dans le js.
Je trouve se langage passionnant.
je risque donc de poster de nombreuse question car je débute en JS.
Encore Merci