javascript - 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(obj)：

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

不要在 HTML 中绑定事件处理程序。

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

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

Answer 2

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

但是，最好使用正确的事件注册而不是内联事件。这是一个 jQuery 示例；为了让它工作，给按钮一个 id：

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