modification dom

modification quantité d'ingrédients

Sujet résolu

joke971

5 juillet 2018 à 20:22:34

Bonjour tout le monde,

voila j'ai un petit souci j'essaye de faire changer les quantités en fonction d'un input mais ça me renvoi un NaN .

voici le code :

le js

			var part = document.getElementById("part");
			var farine = document.getElementById("farine");
			var sel = document.getElementById("sel") ;
			var huile = document.getElementById("huile") ;
			var levure = document.getElementById("levure") ;
			var eau = document.getElementById("eau") ;
			Number(farine);
			Number(part);
			Number(sel);
			Number(huile);
			Number(levure);
			Number(eau);
			farine = document.getElementById("farine").innerHTML =( part * farine);
			sel = document.getElementById("sel").innerHTML =( part * sel);
			huile = document.getElementById("huile").innerHTML =( part * huile);
			levure = document.getElementById("levure").innerHTML =( part * levure);
			eau = document.getElementById("eau").innerHTML =( part * eau);

le html:

<!doctype html>
<html lang="fr">

<head>
	
    <meta charset="utf-8">
	<link rel="stylesheet" href="index.css" />
    <title>Tout le monde peut cuisiner</title>
	
</head>
	
<body>	
<header>
	
	<h1>Tout le monde peut cuisiner</h1>
	
</header>
	
	

	
		<ul id="menu-accordeon">
			
			<li><a href="index.html">Accueil</a></li>
			<li><a href="news.html">Nouveautés</a></li>
			<li><a href="recettes.html">Les recettes</a>
		<ul>
				<li><a href="entrees.html">Les entrées</a></li>
				<li><a href="plats.html">Les plats</a></li>
				<li><a href="desserts.html">Les desserts</a></li>
				<li><a id="active"href="astuces.html">Préparations diverses et astuces</a></li>
		</ul>
   </li>	
		<li><a href="contact.html">Contact</a></li>				
</ul>
	<span>
		<table>
			<tr>
				<td colspan="3"><form action="">
					Nombres de pain<br>
					<input id="part" type="number" name="q" min="1" max="10" step="1" value="1">
					</form> 
				</td>
				
			</tr>
			<tr>
				<td>Farine</td><td  id="farine">600</td><td> grammes</td>
			</tr>
			<tr>
				<td>Sel</td><td id="sel">1</td><td> cuillière(s) à café</td>
			</tr>
			<tr>
				<td>Huile</td> <td id="huile"> 1</td><td> cuillière(s) à soupe</td>
			</tr>
			<tr>
				<td>Levure de boulanger</td><td id="levure">1</td><td>sachet(s)</td>
			</tr>
			<tr>
				<td>Eau</td><td id="eau">37</td><td>cl</td>
			</tr>
		</table>
	</span>
	<span>
		<p>amque lituis cladium concramque lituis cladium concramque lituis cladium concramque lituis cladium concramque lituis cladium concramque lituis cladium concramque lituis cladium concramque lituis cladium concramque lituis cladium concramque lituis cladium concramque lituis cladium concramque lituis cladium concramque lituis cladium concramque lituis cladium concramque lituis cladium concramque lituis cladium concramque lituis cladium concramque lituis cladium concramque lituis cladium concr</p>
<footer><p>amque lituis cladium concr</p></footer>
	
</body>
	

</html>

pouvez-vous éclairer ma lanterne ?

-
Edité par joke971 5 juillet 2018 à 20:36:11

TryAndShare

6 juillet 2018 à 7:37:59

Bonjour,

As-tu suivi le cours sur JavaScript ?

getElementById() renvoie un objet Element et Number() est un constructeur, donc le code après la ligne 7 n'a tout simplement aucun sens o_O

Je pense que la solution devrait ressembler à ça (non testé) :

var part = document.getElementById("part");
var farine = document.getElementById("farine");
var partValue = parseInt(part.innerHTML, 10);
var farineValue = parseInt(farine.innerHTML, 10);
farine.innerHTML = partValue * farineValue;

Ensuite, comment appelles-tu ce script ? Car je ne vois rien dans ton HTML

joke971

6 juillet 2018 à 22:20:28

oui je l'ai suivi . j'avais juste extrait le script du html pour plus de lisibilité . merci pour ton aide

joke971

11 juillet 2018 à 3:31:21

<!doctype html>
<html lang="fr">

<head>
	
    <meta charset="utf-8">
	<link rel="stylesheet" href="index.css" />
    <title>Tout le monde peut cuisiner</title>
	
</head>
	
<body>	
<header>
	
	<h1>Tout le monde peut cuisiner</h1>
	
</header>
	
	

	
		<ul id="menu-accordeon">
			
			<li><a href="index.html">Accueil</a></li>
			<li><a href="news.html">Nouveautés</a></li>
			<li><a href="recettes.html">Les recettes</a>
		<ul>
				<li><a href="entrees.html">Les entrées</a></li>
				<li><a href="plats.html">Les plats</a></li>
				<li><a href="desserts.html">Les desserts</a></li>
				<li><a id="active"href="astuces.html">Préparations diverses et astuces</a></li>
		</ul>
   </li>	
		<li><a href="contact.html">Contact</a></li>				
</ul>
	<span>
		<table>
			<tr>
				<td colspan="3"><form action="">
					Nombres de pain<br>
					<input id="part" type="number" name="q" min="1" max="10" step="1" value="1">
					</form> 
				</td>
				
			</tr>
			<tr>
				<td>Farine</td><td  id="farine">600</td><td> grammes</td>
			</tr>
			<tr>
				<td>Sel</td><td id="sel">1</td><td> cuillière(s) à café</td>
			</tr>
			<tr>
				<td>Huile</td> <td id="huile"> 1</td><td> cuillière(s) à soupe</td>
			</tr>
			<tr>
				<td>Levure de boulanger</td><td id="levure">1</td><td>sachet(s)</td>
			</tr>
			<tr>
				<td>Eau</td><td id="eau">37</td><td>cl</td>
			</tr>
		</table>
	</span>
	
		<article>1) Placer la farine en puit dans un plat<br>2) Mettre le sel et mélanger<br>3) Mélanger l'eau et la levure<br>4) Incorporer doucement le mélange d'eau et de levure en remuant avec les doigts <br>5) Travailler la pâte jusqu'à l'obtention d'une pate lisse et tiède<br>6) Laisser reposer 2h  à temperature ambiante, dans le plat et sous un torchon<br>7) Retravailler la pâte et la détaillé  en boule plus petite si besoin<br>8) Laisser reposer la pâte pendant 30 minutes <br>9) Préchauffer le four à 180 c°<br>10) Réaliser de belles inssisions sur le dessus de la pâtes<br> 11) Cuire pendant environ 45 </article>
		<script  type="text/javascript" >
var part = document.getElementById("part");
var farine = document.getElementById("farine");
var sel = document.getElementById("sel");
var huile = document.getElementById("huile");
var levure = document.getElementById("levure");
var eau = document.getElementById("eau");
var partValue = parseInt(document.getElementById("part").value);
var farineValue = Number(farine.innerHTML);
var selValue = Number(sel.innerHTML);
var huileValue = Number(huile.innerHTML);
var levureValue = Number(levure.innerHTML);
var eauValue = Number(eau.innerHTML);

(function() {
	 part.addEventListener('click', function(e) {
		e.preventDefault();
		console.log(part.getAttribute('max'));
		console.log( parseInt(document.getElementById("part").value) );
		 farine.innerHTML = parseInt(document.getElementById("part").value)* farineValue;
		 sel.innerHTML= parseInt(document.getElementById("part").value)* selValue;
		 huile.innerHTML = parseInt(document.getElementById("part").value)* huileValue;
		 levure.innerHTML = parseInt(document.getElementById("part").value)* huileValue;
		 eau.innerHTML = parseInt(document.getElementById("part").value)* eauValue;

	 })
 })();

			 
			
		</script>
		


	<footer><p>amque lituis cladium concr</p></footer>
	
</body>
	

</html>

bon apres des recherches j'ai enfin trouvé la solution par moi même , je post au cas ou ça puisse servir