Need help on making my Javascript unobtrusive

Question

So I have created an order form in HTML + Javascript, and what I am wanting to use Javascript for is when someone hovers over the "label" for the soup, a hidden div will be visible (later on I intend on getting the code that will display info about the soup whose label was hovered over). I have managed to get that working but i know the Javascript code I implemented is obtrusive and am wanting to put the same code (or equivalent) onto my external Javascript file to make it not obtrusive.

Here is a fragment of code from my form (with the "obtrusive" Javascript):

<form method="post" action="#" name="souporderform" id="souporderform" onsubmit="return validate()">
**<div id="soupinfo"></div>** <!-- hidden div -->

<table>

<tr><th>Item</th><th>Price</th><th>Quantity</th><th id="subtotal_header">Subtotal</th>
<tr>
<td><label for="chicken_quantity" onmouseover="document.getElementById('soupinfo').style.visibility = 'visible';" onmouseout="document.getElementById('soupinfo').style.visibility = 'hidden';">Chicken Soup</label></td>
<td>$3.50<input type="hidden" id="chicken_price" value="3.50"></td>
<td class = "center"><select id="chicken_quantity" name="chicken_quantity" size="1">
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="0" selected>0</option>
</select>
</td>
<td id="chicken_subtotal"></td>

I'm sure the obtrusive Javascript is obvious to experienced Javascript coders viewing this...

Here is the fragment of CSS code concerned with the "hidden" div:

#soupinfo{
position:absolute;
background-color:#ff0000;
color:#000000;
width:100px;
height:20px;
margin-top:-20px;
margin-left:0px;
border:1px solid black;
visibility:hidden;
}

I do have an external Javascript file and this is what I was trying to do to replicate what I want in an unobtrusive manner:

var soupInfoDiv = document.getElementById("soupinfo");
var formLabel = document.getElementsByTagName("label");

for(var i = 0; i < formLabel.length; i++){
formLabel[i].onmouseover = soupInfoDiv.style.visibility = 'visible';
formLabel[i].onmouseout = soupInfoDiv.style.visibility = 'hidden';
}

This code is placed in a function called "setup", which is executed when the page is loaded, with the following code:

if (document.getElementById) {
window.onload = setup;
}

So if anyone can help me out, I will be very greatful :). If supplying the code fragments makes the overall problem difficult to decipher, I can upload all the code to my site and share it on here.

Answer 1

The main issue that I see is that mouseover and mouseout handlers need to be functions.

var soupInfoDiv = document.getElementById("soupinfo");
var formLabel = document.getElementsByTagName("label");

for(var i = 0; i < formLabel.length; i++){
  formLabel[i].onmouseover = function() {
    soupInfoDiv.style.visibility = 'visible';
  }
  formLabel[i].onmouseout = function() {
    soupInfoDiv.style.visibility = 'hidden';
  }
}

I would recommend you consider jQuery though because all of this, including the window.load could be be simplified to this:

$(function() {
  $('#souporderform label').hover(
    function() {
      $('#soupinfo').css('visibility', 'visible');
    },
    function() {
      $('#soupinfo').css('visibility', 'hidden');
    }
  );
});