onclick ne fonctionne pas sur IE 7 et 8 et Safari

Version imprimable

Bonjour,

Mon code marche sous FireFox et a partie de IE 9, en dessous non, et sous Safari non plus.
Je ne suis pas une pro en javascript et mon code n'est surment pas des plus simples. Ce que je voudrais, c'est que par option s'affiche un texte et une image différente (d'où le onClick sur l'option et non un OnChange sur le select) dans un DIV et que je puisse changer la DIV de départ qui s'affiche

le CSS pour une image

Code:

1
2
3
4
5
6
7
8
9
.img1 {
    margin: 0;
    padding: 0; 
    text-align: left;
    background-image: url(img.png); 
    background-repeat: no-repeat; 
    background-position: center;
    height: 732px;
}

le HTML

Code:

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
<p>
    <select id="carte"  name="carte">
        <option value="">Choisissez une date</option>
        <option value="septembre15" onClick="javascript:visibilite('div_texte1');"><span class=mef>26 septembre 2015</span></option>
        <option value="octobre15" onClick="javascript:visibilite('div_texte2');"><span class=mef>15 octobre 2015</span></option>
        <option value="novembre15" onClick="javascript:visibilite('div_texte3');"><span class=mef>28 novembre 2015</span></option>
        <option value="décembre15" onClick="javascript:visibilite('div_texte4');"><span class=mef>10 décembre 2015</span></option>
        <option value="janvier16" onClick="javascript:visibilite('div_texte5');"><span class=mef>17 janvier 2016</span></option>
        <option value="février16" onClick="javascript:visibilite('div_texte6');"><span class=mef>18 février 2016</span></option>
        <option value="mars16" onClick="javascript:visibilite('div_texte7');"><span class=mef>20 mars 2016</span></option>
        <option value="avril16" onClick="javascript:visibilite('div_texte8');"><span class=mef>21 avril 2016</span></option>
        <option value="mai16" onClick="javascript:visibilite('div_texte9');"><span class=mef>26 mai 2016</span></option>
        <option value="juin16" onClick="javascript:visibilite('div_texte10');"><span class=mef>30 juin 2016</span></option>
    </select>
</p>
<div id="div_texte1" style="display:block;" >           
    <h3>PROJET DU 26 SEPTEMBRE 2015</h3>
    <p class="img1"></p>
</div> 
<div id="div_texte2" style="display:none;">
    <h3>PROJET DU 15 OCTOBRE 2015</h3>
    <p class="img2"></p>
</div>                 
<div id="div_texte3" style="display:none;">
    <h3>PROJETDU 28 NOVEMBRE 2015</h3>
    <p class="img3"></p>
</div>

Le Javascript (que je mets dans la page sinon il ne marche pas...)

Code:

1
2
3
4
5
6
var divPrecedent=document.getElementById('div_texte1');    
function visibilite(divId)    {        
    divPrecedent.style.display='none';        
    divPrecedent=document.getElementById(divId);        
    divPrecedent.style.display='';
 }

Si quelqu'un a une idée ou un code plus simplifié qui marcherait sous Safari et IE 7 et 8 ? Un grand merci

05/08/2015, 10h50
Darkauron
Salut,

Tu peux utiliser onchange sur le select et connaitre quelle option a été sélectionner :

Code:

<select id="carte" name="carte" onchange="visibilite(this)">

et dans ton JS :
Code:

1 2 3 4 function visibilite(divId) { var optionSelected = divId.selectedIndex; }
Et ensuite, en fonction de ce que tu récupère, tu affiches ton image.
Commence par améliorer ça, on reparlera de compatibilité après :)
05/08/2015, 10h58
nanaye

Bonjour,

Merci de votre réponse.

J'enlève les onclick ou pas ? et la fonction se réduit à ce que vous m'avez donné ?
05/08/2015, 11h01
nanaye

J'ai mis le onChange, garder les onclick et mis votre fonction, mais ça ne marche pas plus...

Oui tu enlèves les onclicks et non la fonction ne se limite pas à ce que j'ai mis.
Ce code
Code:

1 2 3 4 function visibilite(divId) { var optionSelected = divId.selectedIndex; }
récupère juste la "position" de l'option dans ton select. Dans ton exemple, l'option septembre15 retourne 1.

Tu peux tester :
Code:

1 2 3 4 5 6 7 8 function visibilite(divId) { var optionSelected = divId.selectedIndex; divPrecedent.style.display='none'; divPrecedent=document.getElementById("div_texte"+optionSelected); divPrecedent.style.display=''; } }
Par contre, dans ce cas, il faut toujours que l'ordre de tes div corresponde à l'ordre de tes options (septembre2015 -> div_texte1, octobre15 -> div_texte2, ...)

05/08/2015, 11h13
nanaye

Bonjour,
Merci pour ces précisions... ça ne marche pas plus et ça ne marche plus sous Firefox...
05/08/2015, 11h17
Darkauron

Peux tu me dire s'il y a des erreurs dans la console ?
05/08/2015, 11h22
sekaijin
1. on ne met pas onClick ou onChange mais onclick et onchange.
2. dans les attributs onclick ou onchange on met du code javascript pas javascript:.....
3. on ne mets pas de onclick sur les optiosn car l'utilisateur peut sélectionner une option avec le clavier (il n'y a pas de click dans ce cas)
4. @Darkauron t'a donné une fonction qui te permets de connaitre quelle option a été choisi il te laisse le soin d'exploiter correctement ce choix à toit de l'écrire.
5. ton javascript ne marche pas si tu ne le mets pas dans la page car tu référence élément qui n'existe pas encore. pour résoudre cela il te suffit de placer ton code dans l'événement onload.
6. tu as dans l'éditeur du forum un joli bouton # qui produit une balise [code] place ton code dans cette balise pour le css ajoute [code=css] pour le html [code=html] et pour le javascript ne mets pas <javascript> et laisse la balise [code] ça rendra ton post plus clair
A+JYT

Bonjour,

Désolé de ne pas être une expert en forum, en balise <code>, … je vais essayer de faire mieux… et ni en javascript, d’où ma demande sur ce forum…

Le onclick n’existe plus, le onchange n’a pas de majuscules et le script est dans le <head> et cela ne fonctionne toujours pas…

Et il n’y a pas d’erreur qui s’affiche…

voici le code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<select id="carte"  name="carte" onchange="visibilite(this)">
                <option value="">Choisissez la date des intercessions</option>
                <option value="septembre15">26 septembre 2015</option>
                <option value="octobre15">15 octobre 2015</option>
                <option value="novembre15">28 novembre 2015</option>
                <option value="décembre15">10 décembre 2015</option>
                <option value="janvier16">17 janvier 2016</option>
                <option value="février16">18 février 2016</option>
                <option value="mars16">20 mars 2016</option>
                <option value="avril16">21 avril 2016</option>
                <option value="mai16">26 mai 2016</option>
                <option value="juin16">30 juin 2016</option>
                </select>
 
                <div id="div_texte1" style="display:block;">           
                <h3>PROJET DU 26 SEPTEMBRE 2015</h3>
                <p class="img1"></p>
                </div> 
 
                <div id="div_texte2" style="display:none;"> 
                <h3>PROJET DU 15 OCTOBRE 2015</h3>
                <p class="img2"></p>
                </div>

Et le script dans le <head>

Code:

1
2
3
4
5
6
7
8
9
 
function visibilite(divId)
{
 var optionSelected = divId.selectedIndex;
divPrecedent.style.display='none';
divPrecedent=document.getElementById("div_texte"+optionSelected);
divPrecedent.style.display='';
}
}

Dans la javascript, il y a 2 } à la fin, erreur de copier coller ?

Pour faire plus propre, il serait bien de séparer le html du js, donc :
Dans le html :

Code:

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

et dans un fichier js script.js :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 /*Permet d'initialiser divPrecedent une fois que le DOM est chargé*/ window.onload = function () { divPrecedent=document.getElementById("div_texte1"); } /*Affiche l'image en fonction du choix*/ function visibilite(divId) { var optionSelected = divId.selectedIndex; if(optionSelected != 0) { divPrecedent.style.display='none'; divPrecedent=document.getElementById("div_texte"+optionSelected); divPrecedent.style.display=''; } }
Pour info, ton code fonctionne uniquement sur les 3 premières options car il n'existe pas de div_texte4 et plus.
Dans ce cas, on peut ajouter des tests dans le javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function visibilite(divId) { var optionSelected = divId.selectedIndex; if(optionSelected != 0) { divPrecedent.style.display='none'; if (document.getElementById("div_texte"+optionSelected)!=null) { divPrecedent=document.getElementById("div_texte"+optionSelected); } else { divPrecedent=document.getElementById("div_texte1"); } divPrecedent.style.display=''; } }

05/08/2015, 12h00
nanaye

Merci beaucoup, ça fonctionne sur le dernier code donné !
Il y a bien les div_texte4 jusqu'au div_texte10 mais je pensais qu'il n'étais pas nécessaire de rallonger le code... désolé, j'aurai du le spécifier
Un grand merci
05/08/2015, 12h02
Darkauron

Je m'en suis douté pour les div 4 à 10 mais je préfère préciser. Pense à mettre en résolu si tout est bon.
05/08/2015, 17h39
sekaijin

un dernier point ajoute disabled sur l'option

Code:

<option value="" disabled >Choisissez la date des intercessions</option>

A+JYT