I'm trying to call functions for mouseover and mouseout. I've tried a variety of different solutions that I've found here with no luck.

Here's where I'm at. Please explain the solution as I'm interested in understanding the issue and not just looking for a quick fix.

function MouseOver(elem) {
document.getElementsByName(elem).style.color("white");
}

function MouseOut(elem) {
document.getElementsByName(elem).style.color("black");
}

<nav id="frame-link">
<a href="index.html" name="home" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">Home</a>
</nav>

I'm trying to call functions for mouseover and mouseout. I've tried a variety of different solutions that I've found here with no luck.

Here's where I'm at. Please explain the solution as I'm interested in understanding the issue and not just looking for a quick fix.

function MouseOver(elem) {
document.getElementsByName(elem).style.color("white");
}

function MouseOut(elem) {
document.getElementsByName(elem).style.color("black");
}

<nav id="frame-link">
<a href="index.html" name="home" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">Home</a>
</nav>

• javascript
• mouseover
• mouseout

• 2 this in your context will refer to the element itself, you don't need to re-query the dom for it. change your function body to just elem.style.color = blah; also, .style.color isn't a function. you should get errors in the console explaining as much. – rlemon Commented May 15, 2017 at 20:44
• 1 Hit F12 and go to the console tab. Hit refresh on your page. – Matt Commented May 15, 2017 at 20:45
• Don't use inline HTML event handling attributes. See here for why: stackoverflow./questions/43459890/… – Scott Marcus Commented May 15, 2017 at 20:48
• Why aren't you just using CSS hover effects? I believe it would provide the same desired result. – Thomas Juranek Commented May 15, 2017 at 20:49
• @ThomasJuranek is correct, that for simply changing the color of text on hover, using css is much better. But for your question as to why this doesnt work, @rlemon is correct. You can change document.getElementsByName(elem).style.color("white"); to elem.style.color = "white" – Joe Lissner Commented May 15, 2017 at 20:52

4 Answers 4

When you call an inline event handler such as you do with onmouseover="MouseOver(this);" you're passing a reference to the element itself to your function, and in your function you're taking that reference and assigning it to the variable elem.

You would then normally use elem within your function like elem.style.color = "white";, not with parenthesis, as you're not running a function but rather just changing a property.

function MouseOver(elem) {
  elem.style.color = "white";
}

function MouseOut(elem) {
  elem.style.color = "black";
}

<nav id="frame-link">
  <a href="index.html" name="home" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">Home</a>
</nav>

If it's truly just styling that needs to change, then you don't need JavaScript at all. You can just use CSS with the :hover pseudo-class:

.normal { background-color:#e0e0e0; }
.normal:hover { background-color:yellow; }

<nav id="frame-link">
<a href="index.html" name="home" class="normal">Home</a>
</nav>

But, if it's more than just styling, then you'll want to do this the modern, standards-based way. Don't use inline HTML event handling attributes (see here for why). This syntax is a little more typing, but well worth it for all the benefits it brings.

Lastly, (and again), if it is styles that you're after, working with classes is much simpler than working with individual style properties.

// Get a reference to the element that needs to be worked with
var theLink = document.querySelector("a[name='home']");

// "Wire" the element's events
theLink.addEventListener("mouseover", mouseOver);
theLink.addEventListener("mouseout", mouseOut);

function mouseOver() {
  theLink.classList.add("hovered");
}

function mouseOut() {
  theLink.classList.remove("hovered");
}

.normal { background-color: #e0e0e0; }
.hovered { background-color: yellow; }

<nav id="frame-link">
  <a href="index.html" name="home" class="normal">Home</a>
</nav>

Here is your very short solution with modern syntax.

<a href="#" onmouseover="musOvr(this);" onmouseout="musOut(this);">Home</a>
<script>
  const musOvr = elem => elem.style.color = '#fff'
  const musOut = elem => elem.style.color = '#000'
</script>

• You need to put JavaScript code in a <script> tag.
• elem is not the name but the actual reference of the DOM element that caused the event handler to be called. See what's "this" in javascript onclick?
• It is good style to start function names with a lowercase letter.
• Unlike jQuery, where you apply attributes by calling a function, the vanilla JavaScript elem.style.color is a writable string property. You need to assign a value.

<nav id="frame-link">
<a href="index.html" name="home" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">Home</a>
</nav>
<script>
function mouseOver(elem) {
  elem.style.color = "white";
}

function mouseOut(elem) {
  elem.style.color = "black";
}
</script>

Alternatively, use onmouseover="mouseOver(event)" and write:

function mouseOver(event) {
  var elem = event.target;
  elem.style.color = "white";
}

This would allow you to access more properties of the event that occurred, if desired.