«Объект ожидается» Нарушение onClick Event (JavaScript)

Question

Я довольно новичок в JavaScript, и я верю, что сейчас нахожусь в моей голове. Я искал вокруг stackoverflow, но мне не удалось найти ответ на мою конкретную проблему.

При попытке вызвать событие onClick, которое запустит функцию JavaScript, я получаю сообщение об ошибке «Ломать ошибку JScript-времени выполнения - ожидаемый объект» из IE8. Функция также не работает в Chrome, выплевывая ошибку «Uncaught ReferenceError: hLight не определен».

Я вставил соответствующий код ниже.

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 loop как awards.length возвращает самый высокий [общая длина элементов массива] integer и начинается с 0 и дополнительно background-color должны быть backgroundColor

По пересматривают вопрос, обновленный ответ и скрипку

Обновленный 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

Answer 2

awards.length возвращает длину массива и НЕ максимально высокий индекс. Индекс массива начинается с нуля, поэтому самый высокий индекс будет как минимум на 1 меньше длины массива.

Вы должны изменить свой цикл, чтобы начать с нуля var i = 0;, продолжить цикл до тех пор, номер индекса ниже, чем длина массива i < awards.length; и добавьте в индекс для каждого цикла i++.

Пример:

for (var i = 0; i < awards.length; i++) {

Hobe, которая поможет вам :)