javascript - 从两个下拉列表中获取值时出现问题

Question

我是 html/javascript 语言的新手。

我正在尝试从两个组合的下拉列表中获取值(value)并显示它。我的问题是我做错了什么，但我不明白是什么。

注意:作为一个优点，我想添加更多下拉菜单。

遵循 html:

    <form>
    <select name="courselevel" id="courselevel" style="width:120px">
        <option>Courses level</option>
        <option value="1">level 5</option>
        <option value="2">level 4</option>
        <option value="3">level 3</option>
        <option value="4">level 2</option>
        <option value="5">level 1</option>
    </select>
    <br/>
   <select name="tolevel" id="tolevel" style="width:120px">
        <option>To level</option>
        <option value="1">level 4</option>
        <option value="2">level 3</option>
        <option value="3">level 2</option>
        <option value="4">level 1</option>
    </select>
    <br/>
    <input name="button" type="button" value="Submit" onclick="return validate()" />   
    <input name="reset" type="reset" value="Reset" />
<div id="total"></div>
</form>

遵循我的js:

var courselevel = document.getElementById('courselevel'),
    tolevel = document.getElementById('tolevel');

    window.onload = function(){
courselevel = document.getElementById('courselevel'),
tolevel = document.getElementById('tolevel');

courselevel.addEventListener('change', function(e) {
    switch (level.selectedIndex) {
        case 0:
            var courselevelList1   = ["Select level"];
            var courselevellist2    = ["Select level2"];
            fillList(courselevel, courselevelList1);
            fillList(tolevel, courselevelList2);
            break;

        case 1:

            var courselevelList   = ["Select level", "5", "4", "3", "2", "1"];
            var courselevelList2    = ["Select level2", "4", "3", "2", "1" ];
            fillList(level, courselevelList1);
            fillList(tolevel, courselevelList2);
            break;

    }
});

};




function fillList(el, items) {
     el.innerHTML = '';
    for (var i = 0; i < items.length; i++) {
        var option = document.createElement('option');
        option.value = items[i];
        option.text = items[i];
        el.add(option);
    }
}


window.validate = function() {
    var courselevelvalue = parseFloat(courselevel.options[courselevel.selectedIndex].value),
        tolevelvalue = parseInt(tolevel.options[tolevel.selectedIndex].value),
        totaltolevelvalue = courselevelvalue + tolevelvalue;

    total.innerHTML = totaltolevelvalue;    
    return totaltolevelvalue;        

Answer 1

我看不到一个明确的问题，但是在这个 fiddle 中我用你的代码制作的，你可以看到问题是 total 没有定义

你有这个:

total.innerHTML = totaltolevelvalue; 

但没有声明总计

也许您还没有包含完整的代码