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

Question

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

444 views Asked by warenas At 16 December 2021 at 07:14

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>

Original Q&A

There are 3 answers

Lalji Tadhani On 16 December 2021 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>

Ikram Akbar On 16 December 2021 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>

**zer00ne** · Accepted Answer · 2021-12-16T08:19:17+00:00

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>

TechQA.

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

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in HREF

Related Questions in ONMOUSEOVER

Related Questions in ONMOUSEOUT

Popular Questions

Popular Tags

Trending Questions