Calcul en Javascript

Version imprimable

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:

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:

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

26/03/2015, 11h19
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é.
26/03/2015, 11h30
Bovino

Quoi ? Utiliser jQuery pour une simple multiplication ? 8O

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).
26/03/2015, 11h47
caedb2

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

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

Merci

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

Code:

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:

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

26/03/2015, 11h51
-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:

1 2 document.getElementById('resultat_km').value = radios[i].value * document.getElementById('km').value;
26/03/2015, 11h55
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:

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

Merci pour la solution :
Code:

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

Merci