JS: Boite de dialogue alert() ne fonctionne pas sur Chrome

Bonjour à tous,

Je rencontre un problème avec mon code JS, notamment avec la boite de dialogue d'alerte qui ne s'affiche pas sur Chrome alors que sur Firefox cela fonctionne.

Le code en question:

// événement ONLOAD
window.addEventListener('load', function(event){

// FORMULAIRE
	formulaire = document.createElement('FORM');
	titre = document.createElement('LABEL');
	  titre.innerHTML = "Note de musique: ";
	menu = document.createElement('SELECT');
	formulaire.appendChild(titre);
	formulaire.appendChild(menu);
	document.body.appendChild(formulaire);
	
// ARRAY
	var noteClassique = new Array("", "Do", "Ré", "Mi", "Fa", "Sol", "La", "Si");
	var noteAm = new Array ("", "C", "D", "E", "F", "G", "A", "B");
	
// OPTIONS
	noteClassique.forEach(function(note){
  	options = document.createElement('OPTION');
    options.appendChild(document.createTextNode(note));
    options.value = note;
    menu.appendChild(options);
	});
	
//CORRESPONDANCE NOTE AMERICAINE
	menu[0].addEventListener('click', function(event){
		alert('Vous devez choisir une note!');
	});
	menu[1].addEventListener('click', function(event){
		alert('La notation américaine de la note ' + noteClassique[1] + ' est: ' + noteAm[1] + '.');
	});
	menu[2].addEventListener('click', function(event){
		alert('La notation américaine de la note ' + noteClassique[2] + ' est: ' + noteAm[2] + '.');
	});
	menu[3].addEventListener('click', function(event){
		alert('La notation américaine de la note ' + noteClassique[3] + ' est: ' + noteAm[3] + '.');
	});
	menu[4].addEventListener('click', function(event){
		alert('La notation américaine de la note ' + noteClassique[4] + ' est: ' + noteAm[4] + '.');
	});
	menu[5].addEventListener('click', function(event){
		alert('La notation américaine de la note ' + noteClassique[5] + ' est: ' + noteAm[5] + '.');
	});
	menu[6].addEventListener('click', function(event){
		alert('La notation américaine de la note ' + noteClassique[6] + ' est: ' + noteAm[6] + '.');
	});
	menu[7].addEventListener('click', function(event){
		alert('La notation américaine de la note ' + noteClassique[7] + ' est: ' + noteAm[7] + '.');
	});
	menu[8].addEventListener('click', function(event){
		alert('La notation américaine de la note ' + noteClassique[8] + ' est: ' + noteAm[8] + '.');
	});
	
});

Le but de tout cela est: lorsqu'on clique sur une note de musique (Do, Ré, Mi, etc...) qui se trouve dans une liste déroulante <option>, un message d'alerte apparaît pour nous donner la correspondance américaine de la note (C, D, E, etc...).
Comme je le disais, mon code fonctionne sur Firefox mais pas sur Chrome et je ne comprends pas pourquoi, donc si vous pouviez me dire ce qu'il faudrait éventuellement ajouter ou quoi.

Merci d'avance!

PS: mon code n'est peut-être pas très bien fait, n'est pas parfait, mais je suis débutante et cela est pour un devoir pour ma formation.

Bonjour,

Est-ce que dans la console de l'inspecteur d'éléments tu vois une erreur javascript?

Bonjour Raphi,

Effectivement, il semble avoir une erreur:

Sous Firefox aussi visiblement. Pourtant cela fonctionne quand même, j'ai bien les messages d'alertes.

Je t'avoue que je ne sais pas du tout pourquoi il y a cette différence de comportement.
Par contre, concernant l'erreur qui apparaît dans la console, c'est parce que tu appelles un élément qui n'existe pas. Tes éléments vont de 0 à 7 et non pas de 0 à 8 (sinon cela voudrait dire que tu as 9 éléments dans ton array).

Pour ton problème voici une solution. J'en ai profité pour optimiser la partie ou tu gères les conditions:

//CORRESPONDANCE NOTE AMERICAINE
menu.addEventListener('click', function(event) {
    var index = event.target.selectedIndex;

    if (index == 0) {
        alert('Vous devez choisir une note!');
    } else {
        alert('La notation américaine de la note ' + noteClassique[index] + ' est: ' + noteAm[index] + '.');
    }
});

Modifié par Raphi (19 Apr 2019 - 14:05)

Ah oui effectivement j'ai mal compté, après avoir supprimé la ligne:

menu[8].addEventListener('click', function(event){
		alert('La notation américaine de la note ' + noteClassique[8] + ' est: ' + noteAm[8] + '.');

Je n'ai plus d'erreur dans la console JS que ce soit Chrome ou Firefox (mais toujours pas d'alerte sur Chrome ).

En ce qui concerne le code que tu m'as envoyé, il ne fonctionne pas très bien. A chaque fois que je clique sur la sélection pour choisir l'option il m'affiche le message d'alerte 'Vous devez choisir une note' et donc je n'arrive pas à sélectionner la note que je veux.

Ah mince t'as raison...
En fait ça fonctionne sur Chrome mais pas sur Firefox. Je crois que c'est pour ça que j'aime pas le js. Chaque navigateur implémente ça à sa façon. Je t’envoie une correction.

//CORRESPONDANCE NOTE AMERICAINE
menu.addEventListener('click', function(event) {
    if ("index" in event.target) {
        var index = event.target.index;
    } else if ("selectedIndex" in event.target) {
        var index = event.target.selectedIndex;
    }

    if (index == 0) {
        alert('Vous devez choisir une note!');
    } else if (index !== undefined) {
        alert('La notation américaine de la note ' + noteClassique[index] + ' est: ' + noteAm[index] + '.');
    }
});

Là je pense que c'est mieux. Franchement c'est la plaie ces navigateurs qui ne comprennent pas la même chose...

Re Raphi,

je suis désolée mais le code que tu m'as envoyé ne fonctionne toujours pas pour moi x) Toujours le même soucis.

Re iAnaylli,

Voici une autre approche. Par contre si dès le premier clic tu sélectionnes l'élément vide, il ne se passera rien.

//CORRESPONDANCE NOTE AMERICAINE
menu.addEventListener('change', function(event) {
  var index = event.target.selectedIndex;

  if (!event.target.value) {
    alert('Vous devez choisir une note!');
  } else {
    alert('La notation américaine de la note ' + noteClassique[index] + ' est: ' + noteAm[index] + '.');
  }
});

Modifié par Raphi (23 Apr 2019 - 09:04)

Bonjour Raphi,

Cela fonctionne, merci

Ah cool.
N'hésites pas à mettre le sujet en Résolu si c'est bon pour toi.