форма не определена в Firefox

Question

я пытаюсь получить значение параметра элемента:

<div id="decorazioni_agg">Decorazioni aggiuntive:<br> 
     <select id="decorazioni" name="decorazioni"> 
      <option class="option" value="smarties">Smarties</option> 
      <option class="option" value="scaglie">Scaglette di 
          cioccolato</option> 
      <option class="option" value="cheerios">Cheerios</option> 
      <option class="option" value="chocopops">Choco 
          Pops</option> 
     </select><br> 

     <input class="button" name="aggiungi" type="button" value="Aggiungi 
        decorazione" onClick="add_decoration(decorazioni.value)"> 
    </div> 

И это функция add_decoration (объект):

function add_decoration(tipo) 
{ 
if(tipo == 'smarties') 
    add_smarties(); 
else 
    add_something(tipo); 
} 

Теперь это работает как с Chrome, так и с IE8, но не с Firefox 3.5; консоль ошибок firefox говорит:

decorazioni is not defined 

Как я могу обойтись без использования коммутатора, чтобы я мог сохранить свой код в чистоте? Заранее спасибо

Answer 1

onclick="var elem = document.getElementById('decorazioni'); add_decoration(elem.options[elem.selectedIndex].value);" 

Однако, было бы лучше использовать надлежащую регистрацию событий вместо встроенных событий. Вот пример jQuery; чтобы заставить его работать, дайте кнопке идентификатор:

$('#buttonid').on('click', function() { 
    add_decoration($('#decorazioni').val()); 
}); 

Answer 2

Не привязывайте обработчики событий в HTML.

<input class="button" id="aggiungi" name="aggiungi" type="button" value="Aggiungi decorazione" /> 

document.getElementById('aggiungi').onclick= function() { 
    add_decoration(document.getElementById('decorazioni').value); 
};