Action javascript au choix dans une liste html

**draeni31** · 19/04/2020, 12h50

bonjour (et bon confinement...craquez pas!)
j'ai un problème de noobs dans une fonction javascript, je veux simplement que lorsque je choisi une phrase dans une liste "form-select-option", javascript remplisse un paragraphe qu'il y a en dessous du formulaire... simple pour vous, une horreur pour moi...

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
<DOCTYPE html>
<html lang="fr">
<head>
<meta charset ="utf-8"/>
 
<link/>
</head>
<body>
 
<script type="text/javascript">
 
function ddt(){
        let somme = document.getElementById('calcul');
 
        if (somme = "1/2"){
                document.getElementById('result').innerText = "0.5";
        }
        else if (somme = "1/3"){
                document.getElementById('result').innerText = "0.33";
        }
        else{
                document.getElementById('result').innerText = "0.25";
        }
}
</script>
<h1> ESSAI </h1>
<p> Essai sur l'action d'une liste en Javascript</p>
<form id="form1">
<select name="calcul" id="calcul" type="text" onChange="ddt()">
<option>1/2</option>
<option>1/3</option>
<option>1/4</option>
</select>
</form>
<p id="result"></p>
</body>
</html>

au secours !!! help me !!!I'm drowning!!!

Invité · 19/04/2020, 13h18

Bonjour,

Code HTMl :

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

1
2
3
4
5
6
7
8
9
      <form id="form1">
        <select name="calcul" id="calcul">
          <option value="">choisissez</option>
          <option value="0.5">1/2</option>
          <option value="0.33">1/3</option>
          <option value="0.25">1/4</option>
        </select>
      </form>
      <p id="result"></p>

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
"use strict"; // permet d afficher les erreurs JS -> et donc de les CORRIGER
// Quand le DOM est complementent chargé :
window.addEventListener("DOMContentLoaded", (event) => {
 
  const select_calcul = document.querySelector('#calcul');
  const div_result = document.querySelector('#result');
 
  select_calcul.addEventListener('change', function(){
    let somme = this.value; // valeur de l option choisie
    if( somme != '' )
    {
      div_result.textContent = parseFloat(somme);
    } else {
      div_result.textContent = '';
    }
  });
 
});

**javatwister** · 19/04/2020, 16h37

Bref, draeni31, tes options n'avaient pas d'attribut "value", ce qui est gênant;
tu confondais l'opérateur d'affectation "=" avec l'opérateur de comparaison "==";
tu utilisais la préhistorique propriété innerText made in IE...

Alternative à l'excellente proposition de jreaux62:

Code javascript :

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

1
2
3
4
5
window.addEventListener("DOMContentLoaded", () => {
	document.getElementById("calcul").addEventListener("change", e => {
		document.getElementById("result").textContent = e.target.value || "rien"
	})
})

Action javascript au choix dans une liste html

JavaScript

Discussions similaires

Partager

Partager