Discussion :

[caedb2]

Bonjour

Je débute en JS et j'ai besoin d'aide.
Comment récupérer le contenu d'un bouton sélectionné et le multiplier par le nombre de kilomètres entré ( ID "km" pour ensuite l'afficher dans l'ID " resultat_km" )

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function calcul_kilometre() {
	var radios = document.getElementsByName('prix');
	for (var i = 0 ; i <= radios.length ; i++) {
		if (radios[i].checked) {
			document.getElementById('resultat_km').value = radios[i].value;
		}
	}
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<p><input type="text" id="km" name="km" value=""> <label for="nombre_kilometre">Nombre de kilometres</label></p>
<p><input type="radio" id="prix" name="prix" value="0.62" onclick="calcul_kilometre()"> <label for="prix_kilo">0.62</label></p>
<p><input type="radio" id="prix" name="prix" value="0.89" onclick="calcul_kilometre()"> <label for="prix_kilo">0.89</label></p>
<p><input type="radio" id="prix" name="prix" value="0.99" onclick="calcul_kilometre()"> <label for="prix_kilo">0.99</label></p>
<p><label for="resultat_radio">Bouton radio sélectionné</label> <input type="text" id="resultat_km" readonly="readonly"/>

Merci par avance

HR

[naou18]

Je te conseil d'utiliser jQuery c'est plus facile pour faire des select sur des boutons radios, tu peux sélectionner directement ce qui t’intéresse sans devoir parcourir tous le tableau, et après tu multiplie par la valeur que tu veux.
J'espère que ça va t'aidé.

[Bovino]

Quoi ? Utiliser jQuery pour une simple multiplication ?

Et nul besoin de parcourir tout le tableau en JavaScript natif avec querySelector().

@caedb2 : il faudra aussi revoir les bases du HTML, un id doit être unique dans la page (et les attributs for de tes label ne correspondent à rien).

[caedb2]

Merci pour vos remarques.
Exact pour l'ID unique.

Mais en dehors de mes erreurs pourriez vous me dire comment faire

Merci

[caedb2]

Code rectifié.
Un peu d'aide sur la boucle Javascript me serait très utile

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function calcul_kilometre() {
	var radios = document.getElementsByName('prix');
	for (var i = 0 ; i <= radios.length ; i++) {
		if (radios[i].checked) {
			document.getElementById('resultat_km').value = radios[i].value;
		}
	}
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<p><input type="text" id="km" name="km" value=""> <label for="nombre_kilometre">Nombre de kilometres</label></p>
<p><input type="radio" id="prix062" name="prix" value="0.62" onclick="calcul_kilometre()"> <label for="prix_kilo">0.62</label></p>
<p><input type="radio" id="prix089" name="prix" value="0.89" onclick="calcul_kilometre()"> <label for="prix_kilo">0.89</label></p>
<p><input type="radio" id="prix099" name="prix" value="0.99" onclick="calcul_kilometre()"> <label for="prix_kilo">0.99</label></p>
<p><label for="resultat_radio">Bouton radio sélectionné</label> <input type="text" id="resultat_km" readonly="readonly"/>

Merci

[-Rpass-]

Bovino -> Je pense qu'il parlait d'utiliser JQuery pour faciliter la sélection des éléments (au lieu de faire document.getElementById qui est assez lourd à faire), mais effectivement querySelector le fait en Javascript désormais

Et pour multiplier par le nombre de kilomètres il te suffit de récupérer la valeur ( si c'est bien un input ) et de le multiplier avant d'afficher ton résultat

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById('resultat_km').value = radios[i].value * document.getElementById('km').value;

[Bovino]

De toute façon, le parcours du tableau n'a aucune utilité, puisque la fonction est déclenchée au clic d'un bouton radio, on a directement accès à celui qui a été cliqué !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function calcul_kilometre() {
	document.getElementById('resultat_km').value = this.value * document.getElementById('km').value;
}

Ceci dit caedb2, si c'est toi qui a écrit le code présenté, je comprends pas trop quel problème conceptuel te gênait : tu avais déjà toutes les méthodes à utiliser sous les yeux...

[caedb2]

Merci pour la solution :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById('resultat_km').value = radios[i].value * document.getElementById('km').value;

Celle-ci fonctionne

Merci