href link not working with innerHTML script with "onmouseover change text" and onmouseout

Question

My goal is to have text change onmouseover from "hello" (without a link) to "Google" and provide an 'href' on the resulting "Google" text, and then revert to "hello" onmouseout without a link.

The code below works in changing the text from "hello" to "Google" but,

the link on "Google" does not work (even though I can right-click on "Google" and open the link on another tab)
the text does not change back to "hello" onmouseout.

Thanks for your help in advance!

Here is my code:

<style>
    .container {
        margin-top: 6vw;
        margin-left: 40%;
        margin-right: 40%;
}
</style>

<div class="container">
    <h1>
        <div class="hello" id="hello1" onmouseover="changeText()" onmouseout="changeText(this,'Hello.')">Hello.</div>
    </h1>
</div>

<script>
    function changeText() {
        if (document.getElementById("hello1")) {
            a = document.getElementById("hello1")
            a.innerHTML = '<a href="https://www.google.com">Google</a>'
        }
    }
</script>

score 1 · Answer 1 · answered Dec 16 '21 at 07:23

try this way onmouseout="this.innerHTML='Hello.';"

function changeText() {
        if (document.getElementById("hello1")) {
            a = document.getElementById("hello1")
            a.innerHTML = '<a href="https://www.google.com">Google</a>'
        }
    }

 .container {
        margin-top: 6vw;
        margin-left: 40%;
        margin-right: 40%;
}

<div class="container">
    <h1>
        <div class="hello" id="hello1" onmouseover="changeText()" onmouseout="this.innerHTML='Hello.';">Hello.</div>
    </h1>
</div>

The text does get changed and also the anchor gets added but anchor link is not clickable. There is no way of clicking on the anchor tag. Your code - https://jsfiddle.net/ — invinciblemuffi, Dec 16 '21 at 11:23

zer00ne · Accepted Answer · 2021-12-16T08:25:12.117

By changing a class of a parent tag, any and all child tags can be affected via CSS. Having the HTML ready when the page loads and then hiding it is better than constantly creating and destroying HTML for trivial effects.

The events "mouseenter" and "mouselrave" are handled by a property event handler and an event listener. Either one is sufficient, but avoid using attribute event handlers:

 <div onmouselame="lameAttributeEventHandler()">...</div>

Details are commented in the example below

// Reference the <header>
const hdr = document.querySelector('.title');

/* This is a property event handler
// Whenever the mouse enters within the borders of
// the <header>:
//            '.google' class is added
//            '.hello' class is removed
*/
hdr.onmouseenter = function(event) {
  this.classList.add('google');
  this.classList.remove('hello');
};

/* This is an even listener 
// Whenever the mouse exits the <header> the
// opposite behavior of the previous handler 
// happens
*/
hdr.addEventListener("mouseleave", function(event) {
  this.classList.add('hello');
  this.classList.remove('google');
});

.title {
  height: 50px;
  margin-top: 3vh;
  border: 3px solid black;
  text-align: center;
}

h1 {
  margin: auto 0;
}

.hello span {
  display: inline-block;
}

.hello a {
  display: none;
}

.google a {
  display: inline-block;
}

.google span {
  display: none;
}

<header class="title hello">
  <h1>
    <span>Hello</span>
    <a href="https://www.google.com">Google</a>
  </h1>
</header>

score -1 · Answer 3 · answered Dec 16 '21 at 07:26

You can try this, May it help u to solve the problem

<!DOCTYPE html>
    <head>
    <title>change text on mouse over and change back on mouse out
    </title>
    
    <style>
    #box {
    float: left;
    width: 150px;
    height: 150px;
    margin-left: 20px;
    margin-top: 20px;
    padding: 15px;
    border: 5px solid black;
    }
    </style>
    </head>
    <html>
    
    <body>
    <div id="box" onmouseover="changeText('Yes, this is Onmouseover Text')" onmouseout="changeback('any thing')" >
    
    <div id="text-display" >
    any thing 
    </div>
    
    </div>
    
    <script type="text/javascript">
        function changeText(text)
            {
                var display = document.getElementById('text-display');
                display.innerHTML = "";
                display.innerHTML = text;
            }
              function changeback(text)
            {
                var display = document.getElementById('text-display');
                display.innerHTML = "";
                display.innerHTML = text;
            }
        </script>
    </body>
    </html>

The answer is not what the question is about, please try to get into more detail. — invinciblemuffi, Dec 16 '21 at 10:03

href link not working with innerHTML script with "onmouseover change text" and onmouseout

3 Answers3