Search code examples
javascripthtmlhyperlinkhrefonmouseover

OnMouseOver() don't change the Href property with JavaScript

I have this link in my web that I would like to change with JavaScript. For some reason, I can change its "Display" property but I can't change its "href" property.

Here it goes:

Line with the script

<li style="width:15%; text-align:center;" onMouseOver="B1();"><a href="">ADMINISTRACION</a></li>

Line with the link to be changed

<li id="A1" style="width:10%; text-align:center; display:none;"><a href="">A1</a></li>

Function with the JavaScript

function B1(){
            document.getElementById("A1").style.display="block";
            document.getElementById("A1").href="local.php";
            document.getElementById("A1").innerHTML="Locales";}

The display and innerHTML properties work fine. But it doesn't recognizes the element as a link anymore. Is there a problem with my code? Or maybe this event doesn't work with this property?

Thanx in advantage!

Solution

  • You are referencing to the li-element, which has no href attribute. select the anchor under your li first:

    document.getElementById("A1").getElementsByTagName('a')[0].href="local.php";