Calcul d'IMC

**labarre2002** · 03/08/2023, 09h03

Bonjour

Je débute sur javascript et je réalise une page qui calcule l indice de masse corporel

mon code html:

Code html :

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

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
<body>
 
 <div class="content">
    <div>
        <label for="taille">Votre Taille:</label>
        <input type="number" name="taille" id="taille" />
    </div>
 
<div>
    <label for="poids">Votre Poids:</label>
    <input type="number" name="poids" id="poids"/>
</div>
 
 
 
    <button type="submit" class="envoi">Calculer mon IMC</button>
 
 
 </div>
 
 
    <script src="./index.js">
 
    </script>
</body>

mon code JS:

Code javascript :

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

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
26
27
28
29
30
const maTaille=document.querySelector('#taille');
console.log(maTaille);
 
 
const monPoids=document.querySelector('#poids');
console.log(monPoids);
 
 
 
const result=document.querySelector('.envoi');
console.log(result);
result=document.querySelector('.envoi');
 
 
let taille=0;
let poids=0;
let answer=0;
maTaille=parseInt(taille);
monPoids=parseInt(poids);
 
 
function calcul(a,b){
    return a /( b * b );
}
 
result.addEventListener("click",()=>{
   calcul(monPoids,maTaille);
alert('Votre IMC est:'+ result);
console.log('Votre IMC est:'+ result);
});

Nom : 11.jpg
Affichages : 430
Taille : 29,1 Ko

Rien ne se passe .Pourrais-je avoir des explications ?

**ASCIIDEFOND** · 03/08/2023, 10h01

Salut labarre2002,

Pour simplifié:

Code HTML :

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

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <style>
        .content {
            position: relative;
            width: max-content;
            margin: 20px auto;
        }
 
        .content div:nth-child(1) {
            margin-top: 10px;
        }
 
        .content div:nth-child(2) {
            margin-top: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
 
<body>
    <div class="content">
        <div>
            <label for="taille">Votre Taille: </label>
            <input type="text" name="taille" id="taille" placeholder="En cm" />
        </div>
 
        <div>
            <label for="poids">Votre Poids: </label>
            <input type="text" name="poids" id="poids" placeholder="En Kg" />
        </div>
 
        <button type="button" class="envoi">Calculer mon IMC</button>
 
    </div>
 
    <script>
        const maTaille = document.getElementById('taille');
        const monPoids = document.getElementById('poids');
        const envoi = document.querySelector('.envoi');
 
        envoi.addEventListener("click", () => {
            let taille = (maTaille.value) / 100,
            poids = (monPoids.value),
            result = poids / (taille * taille)
 
            alert(`Votre IMC est de: ${result.toFixed(3)}`)
        })
 
    </script>
</body>
 
</html>

**javatwister** · 03/08/2023, 11h40

Et j'aurais même éliminé les variables intermédiaires pour simplifier l'idée:

Code :

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

1
2
3
document.querySelector('.envoi').addEventListener("click", () => 
	alert(`Votre IMC est de: ${(document.getElementById('poids').value /(document.getElementById('taille').value/100)**2).toFixed(3)}`)
)

**labarre2002** · 03/08/2023, 13h22

Merci pour vos messages le but en postant c 'était des explications
plutot que du code que je peine a comprendre.

**Archimède** · 03/08/2023, 15h34

Le problème est que tu confonds les input type number avec la valeur qu'ils renvoient.
quand tu mets monPoids=parseInt(poids), tu sembles vouloir affecter un entier à un élément du DOM...Donc forcément, ça ne peut pas marcher !
donc déjà, tu définis un min, un max, une valeur par défaut et un step (en décimal (par défaut c'est un) pour l'incrément) à tes input number.
exemple :

Code html :

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

1
2
<input type="number" name="taille" id="taille" min="1"  max="2" value="1.70" step="0.1"/>
   <input type="number" name="poids" id="poids" min="30" max="100" value="70"/>

Après dans le callback du click, tu commences par définir tes variables pour ton calcul...

Code javascript :

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

1
2
3
4
,()=>{
    let taille=maTaille.value;  // taille va prendre la valeur sélectionnée dans le input number: maTaille
    let poids=monPoids.value;// idem pour poids - et attention, c'est réactualisé à chaque click donc à mettre dans la fonction associée au click et pas en dehors comme tu le fais.
    alert('Votre IMC est:  '+calcul(poids,taille) );  // ici le calcul brut de l'IMC à formater pour l'affichage...

Calcul d'IMC

JavaScript

Discussions similaires

Partager

Partager