"Object Expected" Breaking onClick Event (JavaScript)

Question

I'm fairly new to JavaScript and I believe I'm currently in over my head. I've searched around stackoverflow, but I was unable to find an answer to my particular problem.

While attempting to trigger an onClick event that will set off a JavaScript function, I'm receiving the error "Breaking on JScript runtime error - Object expected" from IE8. The function does not work in Chrome either, spitting out the error "Uncaught ReferenceError: hLight is not defined."

I've pasted the relevant code below.

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>

Here is a JSFiddle as requested: http://jsfiddle.net/QvRMf/

show a jsfiddle with the problem

Sionnach733
– Sionnach733

2014-01-23 14:36:25 +00:00
Commented Jan 23, 2014 at 14:36 — Sionnach733
– Sionnach733, Commented Jan 23, 2014 at 14:36

Dhaval Marthak · Accepted Answer · 2014-01-23 15:01:16Z

2

Try Updating your for loop as awards.length returns the highest[total Length of array elements] integer value and it starts from 0 and in addition background-color should be backgroundColor

By revisiting the question, updated answer and fiddle

Updated 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

edited Jan 23, 2014 at 15:01

answered Jan 23, 2014 at 14:39

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ryan Buss Over a year ago

I apologize, but I forgot to add the items that I was targeting with the JavaScript. I've added a JSFiddle with the information and I'll also update the original questions code. EDIT: Thank you for the loop tip! I'm still getting the hang of this.

Dhaval Marthak Over a year ago

@RyanBuss I'have updated my answer with the fiddle! Is that what you need?

Lasse · Accepted Answer · 2014-01-23 14:57:10Z

1

awards.length returns the length of the array and NOT the highest index. Array index starts at zero so the highest index will allways as a minimum be 1 less then the array length.

You should change your for loop to start at zero var i = 0;, continue the loop as long the index number is lower then the array length i < awards.length; and add one to the index for each loop i++.

Example:

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

Hobe that helps you:)

answered Jan 23, 2014 at 14:57

Lasse

5853 silver badges14 bronze badges

Collectives™ on Stack Overflow

"Object Expected" Breaking onClick Event (JavaScript)

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related