Question

This seems really simple but Im brand new to JavaScript. I have a link on my page. When you click this link 2 things happen. 1) Using html the page jumps to the location of the referenced anchor tag on the page. 2) The div that holds the link changes its background color.

HTML

<a href="#abcd"  onclick="makeRed(this.href);">Link to div on page</a>

<div id="abcd">
    <a name="abcd">Not a clickable link.</a>
</div>

JS

function makeRed(x) {
var highlight=x.slice(-4);
document.getElementsByName(highlight).parentNode.style.backgroundColor="red";
}

Firebug tells me document.getElementsByName(highlight).parentNode is undefined and this is where I’m confused.

Answer 1

Replace

document.getElementsByName(highlight).parentNode.style.backgroundColor="red";

with

document.getElementsByName(highlight)[0].parentNode.style.backgroundColor="red";

since getElementsByName returns an array