11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Onchange remplacer par "change" dans le fichier js

Pages :
bonjour

j'ai créer une liste deroulante lié et je voudrais supprimer 
onChange="affichage_liste2('region','dpt');">


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<title>listeregion</title>
</head>
<script src="listeliee.js"></script>

<body>
<form id="form1" name="form1" method="post" action="">
  <label for="region">Choisissez une région :</label>
  <select id="region" name="region" onChange="affichage_liste2('region','dpt');">
    <option value="0">-- choisissez --</option>
    <option value="paysloire">Pays de Loire</option>
    <option value="breizh">Bretagne</option>
    <option value="poitou">Poitou Charentes</option>
  </select>
  <label for="dpt">Puis un département :</label>
  <select id="dpt">
  <option>--- choisissez---</option>
  </select>
  <input type="submit"/>
</form>
</body>
</html>


function affichage_liste2 (id_lire,id_ecrire) { 
	var liste2="";
	
	document.getElementById (id_ecrire).innerHTML="";
	
	var choix_departement=document.getElementById(id_lire).value; 
	
	switch (choix_departement) { 
		case '0' : return; break;
		case 'paysloire' : var tab = ["Maine-et-Loire","Loire-atlantique","Sarthe","Mayenne","Vendée"]; break;
		case 'breizh' : var tab =  ["Finistère","Côtes d'Armor","Ile-et-Vilaine","Morbihan"]; break;
		case 'poitou' : var tab =  ["Charente","Charente-maritime","Deux-Sèvres","Vienne"]; break;
	}

		//generation de la deuxieme liste
	liste2 += '<select name="dpt">';
	for (j=0;j<tab.length;j++) { 
		liste2 += '<option value="'+tab[j]+'">'+tab[j]+'</option>';
	}
	liste2 += '</select>';
	//ecriture de la deuxieme liste dans le div la page
	document.getElementById(id_ecrire).innerHTML=liste2;
}


donc j'ai supprimer le onchange et dans mon fichier js j'ai ajouté par :
window.addEventListener("load",function(){
            affichage_liste2 (); 
            document.getElementById("region").addEventListener("change",affichage_liste2 );
        });


mais ca ne fonctionne pas, je ne comprend pas ce qui ne va pas

merci de votre aide
Modifié par moon28 (30 Aug 2017 - 14:13)
allan00958 a écrit :
Commençons par les erreurs affichées dans la console, s'il y en a.


ah oui la console :

voici l'erreur: TypeError: document.getElementById(...) is null[En savoir plus]
listeliee.js:5:2 
document.getElementById (id_ecrire).innerHTML="";

listeliee.js:26:13 
affichage_liste2();

Modifié par moon28 (30 Aug 2017 - 14:36)
Je pense qu'il faut mettre des "" donc: document.getElementById ("id_ecrire");

Et quel est le message d'erreur concernant la fonction listeliee.js:26:13 ?
allan00958 a écrit :
Je pense qu'il faut mettre des "" donc: document.getElementById ("id_ecrire");

Et quel est le message d'erreur concernant la fonction listeliee.js:26:13 ?


ya un seul message pour les 2 erreurs
voici l'erreur: TypeError: document.getElementById(...) is null
peut etre que c'est lié... j'ai mit des "" pour le moment ca marche pas.

merci Jencal j'essaie de voir entre parenthese aussi..

en fait des que j'enleve le onchange du html et je remplace par change ds le fichier js la liste departement ne s'affiche plus juste la liste region
Modifié par moon28 (30 Aug 2017 - 14:52)
je rajoute :

il faut mettre ton script 

<script src="listeliee.js"></script>

à la fin du body (le script étant chargé avant le HTML dans ton cas) d'où l'erreur
TypeError: document.getElementById(...) is null
Modifié par JENCAL (30 Aug 2017 - 14:55)
JENCAL a écrit :
oui donc je me répète,

ta méthode attends des paramètres


ok mais lesquels, je crois c'est departement mais comment l'ajouter je vais chercher merci
JENCAL a écrit :
les paramètres étaient présents avant : affichage_liste2('region','dpt')


ah oui mais comment les ajouter dans le fichier js, tout ce que j'ai essayer ne marche pas
T'aurais pu trouver par toi même c'est pas bien compliquer 


addEventListener('change', function() {
    affichage_liste2('region','dpt');
}, false);
JENCAL a écrit :
T'aurais pu trouver par toi même c'est pas bien compliquer 


addEventListener('change', function() {
    affichage_liste2('region','dpt');
}, false);


merci j'ai essayer ton code aussi ca ne marche pas non plus
non mais là tu déconne, tu as ajouter des guillemets à id_ecrire
document.getElementById("id_ecrire").innerHTML=liste2;

alors qu'avant y'en avait pas et que ça marchait très bien...
Dans le codepen, la méthode addEventListener n'est attaché à aucun élément, c'est pour ça que ne fonctionne pas
Pages :
Sujet clos
Aller à