lier un fichier js à un fichier html contenant un select

**Soccariste** · 19/07/2023, 11h54

Bonjour. Une question assez simple, mais après recherches, je n'ai pas toujours trouvé. J'ai un fichier HTML avec un select. Dans mon js à part, il y a une action à réaliser, un commentaire qui apparaît dans paragraphe suivant le choix effectué. Je ne sais pas où mettre, ou quelles instructions dans le HTML pour que le lien se réalise entre les deux fichiers.

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
<!DOCTYPE html>
<head>
  <title> choix d'&eacute;quipes</title>
</head>
<body>
<form>  
  <select id="myselect">
    <option value="">--Make a choice--</option>
    <option value="A">AA</option>
    <option value="B">BB</option>
    <option value="C">CC</option>
    <option value="D">DD</option>
  </select>
</form>
<p></p>
<script src="javachoixequipes.js"></script>
</body>
</html>

Code :

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
var selectElmt = document.getElementById("myselec");
var valeurselectionnee = selectElmt.options[selectElmt.selectedIndex].value;
var textselectionne = selectElmt.options[selectElmt.selectedIndex].text;
var para = document.getElementsByTagName("p"); 
var text = para.textContent;
 
function setTeam() {
 
  if (valeurselectionnee === 'A') {
    para.textContent = 'Che sei cattivo.';
  } else if (valeurselectionnee === 'B') {
    para.textContent = 'Che sei cattivo.';
  } else if (valeurselectionnee === 'C') {
    para.textContent = 'Che sei cattivo.';
  } else if (valeurselectionnee === 'D') {
    para.textContent = 'Sei ottimo.';
  } else {
    para.textContent = '';
  }
}

Je vous remercie.

**Soccariste** · 19/07/2023, 14h58

Bonjour. J'ai mon fichier HTML qui contient une partie select et un fichier javascript qui contient une fonction pour des commentaires suivant les réponses du select. Je n'arrive pas, même après certaines recherches à bien placer le script src en particulier . J'ai essayé mais ce ne sera pas dans ce qui sera en - dessous avec addEventListener(change,...) pareil cela n'a rien donné. Je suis sur java depuis très peu, j'utilise Brave comme navigateur. Je vous remercie.
Partie 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
<!DOCTYPE html>
<head>
  <title> choix d'&eacute;quipes</title>
</head>
<body>
<form>  
  <select id="myselect">
    <option value="">--Make a choice--</option>
    <option value="A">AA</option>
    <option value="B">BB</option>
    <option value="C">CC</option>
    <option value="D">DD</option>
  </select>
</form>
<p></p>
<script src="javachoixequipes.js"></script>
</body>
</html>

Javascript :

Code :

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
var selectElmt = document.getElementById("myselect");
var valeurselectionnee = selectElmt.options[selectElmt.selectedIndex].value;
var textselectionne = selectElmt.options[selectElmt.selectedIndex].text;
var para = document.getElementsByTagName("p"); 
var text = para.textContent;
 
function setTeam() {
 
  if (valeurselectionnee === 'A') {
    text = 'alpha.';
  } else if (valeurselectionnee === 'B') {
    text = 'beta.';
  } else if (valeurselectionnee === 'C') {
    text = 'gamma.';
  } else if (valeurselectionnee === 'D') {
    text = 'sygma.';
  } else {
    text = '';
  }
}

**mathieu** · 19/07/2023, 15h08

regardez dans la console de développement de votre navigateur, je pense que vous allez voir une erreur.

et ensuite vous pouvez vous aider de la documentation là pour résoudre cette erreur :
https://developer.mozilla.org/fr/docs/Web

**mathieu** · 19/07/2023, 15h11

vous avez déjà posé la même question là, il vaut que cela reste dans une seule discussion :
https://www.developpez.net/forums/d2...tenant-select/

**Soccariste** · 19/07/2023, 16h09

Bonjour et merci pour les indications. La console indique aucune erreur. J'ai essayé sur des émulateurs en ligne, la partie javascript ne passe pas. Je vais continuer les recherches.

**mathieu** · 19/07/2023, 21h17

je viens de voir que le code n'écoute pas le changement de valeur donc vous devez plutot faire comme sur le code suivant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var selectElmt = document.getElementById("myselect");
 
 
selectElmt.addEventListener("change", e => {
 
	var valeurselectionnee = selectElmt.options[selectElmt.selectedIndex].value;
	var textselectionne = selectElmt.options[selectElmt.selectedIndex].text;
	var para = document.getElementsByTagName("p")[0];
 
	para["textContent"] = valeurselectionnee;
 
});

l'erreur à laquelle je pensais était avec "getElementsByTagName" qui retourne une liste même s'il y a un seul élément.
vous pouvez trouver plus d'informations là :
https://developer.mozilla.org/fr/doc...dEventListener
https://developer.mozilla.org/fr/doc...mentsByTagName

**Soccariste** · 20/07/2023, 07h43

Bonjour. Merci pour les explications. C'est parfait. Je vais regarder de bien plus près ces notions de listes. Merci encore.

lier un fichier js à un fichier html contenant un select

JavaScript

Discussions similaires

Partager

Partager