javascript - "Object Expected"中断 onClick 事件 (JavaScript)

Question

我对 JavaScript 还很陌生，我相信我现在已经不知所措了。我搜索了 stackoverflow，但找不到我的特定问题的答案。

在尝试触发将触发 JavaScript 函数的 onClick 事件时，我收到来自 IE8 的错误“Breaking on JScript runtime error - Object expected”。该函数在 Chrome 中也不起作用，并吐出错误“Uncaught ReferenceError: hLight is not defined.”

我已经在下面粘贴了相关代码。

JavaScript:

<script type="text/javascript">
    function hLight(id) {
        var e = document.getElementById(id);
        e.style.background-color = '#CCC';

        hUnLight(id);
    }
    function hUnLight(id) {
        var awards = document.querySelectorAll('.award');
        for (var i = awards.length; i>=0; i--; ) {
            if (awards[i].id != id) {
                awards[i].style.background-color = 'none';
            }
        }
    }
</script>

HTML:

<ul>
    <li onClick="hLight('honors');"><a href="#honors">The Honors Incentive</a></li>
    <li onClick="hLight('associate');"><a href="#associate">The Associate's Degree Incentive</a></li>
    <li onClick="hLight('accelerated');"><a href="#accelerated">The Accelerated Incentive</a></li>
</ul>

<h2 class="award" id="honors">The Honors Incentive Eligibility Criteria</h2>
<ul>
    <li>1st time FOB HEA recipients that graduated from an accredited Indiana high school with a 3.0 or greater cumulative GPA will earn the Honors Incentive Award during their 1st year of FOB HEA eligibility.</li>
    <li>Second, third, and fourth-year college students who qualify for FOB HEA and have earned a 3.0 or greater cumulative GPA will qualify for the Honors Incentive Award.</li>
</ul>
<h2 class="award" id="associate">The Associate’s Degree Incentive Eligibility Criteria</h2>
<ul>
    <li>Students that earn an Associate’s Degree will be awarded the Associate’s Degree Incentive to use while later pursuing their Bachelor’s Degree, provided their primary degree objective was the AS degree when it was earned.</li>
</ul>
<h2 class="award" id="accelerated">The Accelerated Incentive Eligibility Criteria</h2>
<ul>
    <li>Students that earn 39 or more credit hours during their prior student centric year will earn an Accelerated Incentive Award the following academic year.</li>
</ul>

这是请求的 JSFiddle:http://jsfiddle.net/QvRMf/

Answer 1

尝试更新您的 for 循环，因为 awards.length 返回最高的[数组元素的总长度] 整数 值，它从 0 并且 background-color 应该是 backgroundColor

通过重新审视问题、更新答案和 fiddle

更新的 JS:

function hLight(id) {
    var e = document.getElementById(id);
    e.style.backgroundColor = '#CCC';

    hUnLight(id);
}

function hUnLight(id) {
    var awards = document.querySelectorAll('.award');
    for (var i = 0; i < awards.length; i++) {
        if (awards[i].id != id) {
            awards[i].style.backgroundColor = '';
        }
    }
}

Fiddle DEMO- Updated Latest