Member Avatar for jt86442


Hi,

Actually my requirement is when i move my mouse on the link, One alert box shoulb be appear and it will count how many times i move on that link. I already written the code in javascript but it didn't reach to my requirement. Please go through the below code and do needful.


<html>
<head>
<title>
Event Handler with multiple statement</title>
<script language="javascript">
count=0
</script>
</head>
<body>
<h1>Evet Handler with multiple statements</h1>
<p><a href="https://imailhyd.satyam.com\owa" ONMOUSEOVER="++count; 
"alert('You moved mouse here "++count+" times!')">
Displays the number of times you move your mouse over the link.
</a>
</p>
</body>
</html>

Thanks & Regards,

Jayavardhan.Tummidi

  • 2 Contributors
  • 3 Replies
  • 2K Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by Member #334542

Dani AI

Generated

What you want is to count each time the pointer enters the link, not every tiny movement while it sits on top of it. mouseover can fire multiple times as you move across child nodes, which is why your counter jumps. Use mouseenter (fires once per entry) and keep the JS out of the HTML. Also watch your quoting; the inline handler in your post mixes quotes, which breaks the alert. @rajarajan2017 showed the right idea of incrementing a variable; here is a cleaner version without hidden fields or inline attributes.

<a id="track" href="#">Displays the number of times you move your mouse over the link.</a>
<span id="count">0</span>

<script>
  let count = 0;
  const link = document.getElementById('track');
  const display = document.getElementById('count');

  link.addEventListener('mouseenter', () => {
    display.textContent = ++count;
    alert('You moved the mouse here ' + count + ' times!');
  });
</script>

If you need this for many links, avoid attaching a handler to each one. Delegate with a single mouseover listener and guard so you only count true entries to the anchor (not moves between its children):

<script>
  let counts = new WeakMap();
  document.addEventListener('mouseover', (e) => {
    const a = e.target.closest('a.track');
    if (!a || a.contains(e.relatedTarget)) return; // not a real entry
    const n = (counts.get(a) || 0) + 1;
    counts.set(a, n);
    alert('Hovered ' + n + ' times');
  });
</script>

Tip: alerts can be intrusive and can trap focus; consider updating text on the page instead, or throttle alerts during testing.

Recommended Answers

All 3 Replies

Member Avatar for Member #334542

Solution:

<html>
<head>
<title>
Event Handler with multiple statement</title>
<script language="javascript">
function cnt()
{
	var count=parseInt(document.frm1.inp1.value);
	count++;
	document.frm1.inp1.value=count;
	alert(document.frm1.inp1.value);
}
</script>
</head>
<body>
<form name="frm1" method="post" action="">
<h1>Evet Handler with multiple statements</h1>
<p><a href="https://imailhyd.satyam.com\owa" ONMOUSEOVER="cnt()">Displays the number of times you move your mouse over the link.</a></p>
<input type="hidden" name="inp1" value="0"/>
</form>
</body>
</html>

I have tested and works fine.

Member Avatar for jt86442

Thank you RajaRajan.

Member Avatar for Member #334542

Please Mark the thread as solved. if it is solved.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.