11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
Alors je veux calculer un prix a partir du nombre de personnes dont adultes et enfants choisis mais le resultat reste toujours 0.

<form action="" method="post >
<div id="adult">
	<label> Adulte </label>
	<select id="nbadultes">
		
		<option> 1</option>
		<option>2</option>
		<option> 3</option>
		<option> 4</option>
	</select>
</div>
<div id="enfant">
	<label>Enfant(0-12ans)</label>
	<select id="nbenfants">
		<option>0</option>
		<option>1</option>
		<option>2 </option>
		<option> 3</option>
		<option> 4</option>
	</select>
</form>
<script>
<script> let prixAdulte = 50 ;
let prixEnfant = 40 ;
let nbAdultes = document.getElementById(nbadultes);
let nbEnfants = document.getElementById(nbenfants);
let total = prixAdulte*nbAdultes + prixEnfant*nbEnfants;
document.getElementById("total").innerHTML = total;
</script>

Je voudrais comprendre ou se situe le probleme
Merci d'avance
Modifié par anyas (10 Aug 2020 - 18:21)
Modérateur
bonjour,

quelques erreurs de typo et de recuperation de valeur :
1 let nbAdultes = document.getElementById(nbadultes) Manque les apostrophes, sinon on recherche une variable ...
2 let nbAdultes = document.getElementById('nbadultes').value; tu veut récuperer la valeur de ton select et pas juste le select.

correction
let prixAdulte = 50;
let prixEnfant = 40;
let nbAdultes = document.getElementById('nbadultes').value;
let nbEnfants = document.getElementById('nbenfants').value;
let total = (prixAdulte * nbAdultes) + (prixEnfant * nbEnfants);
document.getElementById("total").innerHTML = total;


voici un codepen fonctionnel qui reprend le code corrigé et inclus dans une fonction : https://codepen.io/gc-nomade/pen/LYNpOoo?editors=0010

Cdt
Modifié par gcyrillus (11 Aug 2020 - 19:46)