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');
    }
  );
});

Answer 2

As commented by Blender, I also recommend using a javascript libary for this, for example jQuery or MooTools. Now, if I understand you correctly, you simply want to make it so that when you hover over element x, you want element y to be shown. This can be done pretty simply by using the data-attributes of html 5 (which works in older browsers), and a javascript framework (I'll use jQuery here, but if you need mootools instead, just ask and I'll translate it).

First you should anote the element you want to hover over like so:

<div data-hover-elm="id_of_item_to_show">.......</div>

It might be a div, a label, or whatever you want.

Then, in the external js file, all you need to do is this:

$(function() {
    var elms = $('[data-hover-elm]');
    $.each(elms, function() {
        var $this = $this,
            $itm = $('#' + $this.attr('data-hover-item'));
        $this.hover(function() {
            $itm.show();
        }, function() {
            $itm.hide();
        });
    });
});