.getElementById IE

Question

J'ai un JavaScript en cours d'exécution 2 ".getElementById('').style" changements. Les deux fonctionnent parfaitement dans FF, mais le premier ne fonctionne pas dans IE7.

Appréciez toute l'aide :)

Première SourceCode:

function ingen() { 
    document.getElementById('merInfo1').style.display='none'; 
    document.getElementById('merInfo2').style.display='none'; 
    document.getElementById('merInfo3').style.display='none'; 
    document.getElementById('merInfo4').style.display='none'; 
    document.getElementById('merInfo5').style.display='none'; 
    document.getElementById('merInfo6').style.display='none'; 
    document.getElementById('merInfo7').style.display='none'; 
} 

HTML:

<span class="enkeltSkjema" id="avtaleInput"> 
    <select name="radio1" id="radio1"> 
     <option value="1" onClick="ingen()">lorem</option> 
     <option value="2" onClick="some()">lorem</option>         
     <option value="3" onClick="other()">lorem</option> 
     <option value="4" onClick="func()">lorem</option> 
     <option value="5" onClick="tion()">lorem</option> 
     <option value="6" onClick="names()">lorem</option> 
     <option value="7" onClick="goes()">lorem</option> 
     <option value="8" onClick="here()">lorem</option> 
    </select> 
</span>       
<span class="enkeltSkjema" id="merInfo"> 
    <span id="merInfo1" name="merInfo1"></span> 
    <span id="merInfo2" name="merInfo2"></span> 
    <span id="merInfo3" name="merInfo3"></span> 
    <span id="merInfo4" name="merInfo4"></span> 
    <span id="merInfo5" name="merInfo5"></span> 
    <span id="merInfo6" name="merInfo6"></span> 
    <span id="merInfo7" name="merInfo7"></span> 
</span> 

En second lieu, fonctionne très bien dans IE:

function levAdresse() { 
    if (document.getElementById('egenLevAdr').checked == true) { 
     document.getElementById('levAdrBox').style.display='block'; 
    } 
    else { 
     document.getElementById('levAdrBox').style.display='none'; 
    } 
} 

HTML:

<div id="levAdrBox"> 
    <div id="levAdr">Field 
     <span class="" id="levAdrInput"><input type="text" id="text12" name="text12" /></span> 
    </div> 
    <div class="" id="levPostSted"> field:* 
     <span class="" id="levPostStedInput"> 
      <input type="text" id="text18" name="text18" /> 
      <span class="" id="levPostNr">field:* 
       <span class="" id="levPostNrInput"> 
        <input type="text" id="text17" name="text17" /> 
       </span> 
      </span> 
     </span> 
    </div> 
</div> 

Answer 1

Est-il possible que vous appeliez la fonction ingen() avant que le DOM soit entièrement construit?

Answer 2

Si vous avez l'option/possibilité, j'utiliser jQuery et se débarrasser de (la plupart) les incompatibilités entre les navigateurs:

function ingen() { 
    $("#merInfo span").css("display", "none"); 
} 

$(document).ready(function() { 
    $("#egenLevAdr").click(function() { $("#levAdrBox").toggle(); }); 
}); 

Answer 3

Avez-vous d'autres éléments nulle part ailleurs sur la page avec un attribut "name" réglé sur:

merInfo1 
merInfo2 
merInfo3 
merInfo4 
merInfo5 
merInfo6 
merInfo7 

(de tous les cas aussi: par exemple MerInfo1, merinfo1, MERinfo1 sont tous les mêmes dans IE)

si oui, c'est le bug. IE considère que le nom est identique à ID (qui est évidemment un bogue)

Answer 4

Uhhmmm ... Peut-être que si vous utilisez "OnChange()" sur SELECT et non "OnClick" sur OPTION?

<select name="radio1" id="radio1" onChange="ingen(this.value)"> 
     <option value="1">lorem</option> 
     <option value="2">lorem</option>         
     <option value="3">lorem</option> 
     <option value="4">lorem</option> 
     <option value="5">lorem</option> 
     <option value="6">lorem</option> 
     <option value="7">lorem</option> 
     <option value="8">lorem</option> 
</select> 

et dans le Ingen (quelque chose) faire une condition, ou appelez une autre fonction en relation avec la valeur passée ...?