How can I make the onMouseOver function run only once? | Html

Question

I have a code when hovering over the button, it prints a letter on the website. How can I make this hovering happen only once? What I really want to do is hover then the function called a will only be performed once This is the code:

function a(){
document.body.innerHTML += 'uu';
}
</script>
<button onMouseOver="a()">hello world</button>

Answer 1

Rather than using the onmouseover attribute, attach the handler from Javascript and specify the once option:

 let count = 0; const a = function() { document.getElementById('btnTest').innerHTML = `Button hovered ${++count} times`; document.body.innerHTML += 'uu'; }; window.addEventListener('DOMContentLoaded', () => { document.getElementById('btnTest').addEventListener('mouseover', a, { once: true }); });

 <button id="btnTest">This is the button</button>

EventTarget.addEventListener() - Web APIs | MDN

Answer 2

Give your control an id to target, and then remove the attribute after you hover:

 function a() { document.body.innerHTML += 'uu'; let c = document.getElementById("btnTest"); c.removeAttribute('onmouseover'); }

 <button id="btnTest" onMouseOver="a()">hello world</button>

This will only allow the function to run once per page load, so if you need it to work after removing and replacing the mouse again, we will need to adjust it.

Answer 3

It should even if you stop hovering and come back and still not refresh the page it will work