onclick function sometimes doesn't fire its event

**siluaty** · 02-25-2013 07:32 PM

Hello, I've found a strange behaviour in a piece of my javascript application. Here I'm posting a minimal version of the problem.

When a user clicks on a specific div, the code asks that it should fire an event - an alert to simplify; in addition in intervals of 1 second the program updates the content of the divs (here it only checks the divs content and sees that there are no changes).
The problem is that, when the string "new match" is clicked, it should be called the function init_match(), but sometimes (about ~1/10) nothing occurs - i.e. the onclick event isn't fired, the other times everything goes well. This is very strange...

In a short code I can show that problem:

Code:

<html>

<head>
</head>

<body onload="loop()">
  <span id="init_panel" style="visibility:visible; position:absolute; left:0px; top:0px;"></span>

<script type="text/javascript">
function init_match(){
    alert("in init_match()");
    //...
  }
  var flag=true;
  function loop(){
    if (flag){
        var div = document.getElementById("init_panel");
        var HTML = "<div class='links' onclick='init_match();'><font color='black'><b>new match!</b></font></div><br />";
        if (div.innerHTML!=HTML){
            div.innerHTML=HTML;
        }
        setTimeout(loop, 1000);
    }
    else{
        div.innerHTML="";
    }
  }
  loop();
</script>

<style type="text/css">
  .links:hover{
    text-decoration: underline;
    cursor: pointer;
  }
</style>

</body>

</html>

This is really very strange! I don't know how to avoid this problem...
I want to update the links in intervals of 1 second, and that the links still work...

The corresponding jsfield is in:
http://jsfiddle.net/siluaty/grSDs/

Thank you in advance for any help or comment!

**Padonak** · 02-26-2013 02:41 PM

try this one

Code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.links:hover{
text-decoration: underline;
cursor: pointer;
}
</style>
<script type="text/javascript">
var flag=true;
var to="";

function init_match(){
clearTimeout(to);
alert("in init_match()");
//...
to=setTimeout("loop()", 1000);
}

function loop(){
if(flag){
var div = document.getElementById("init_panel");
var HTML = "<div class='links' onclick='init_match();'><font color='black'><b>new match!</b></font></div><br />";
if (div.innerHTML!=HTML){div.innerHTML=HTML;}
to=setTimeout("loop()", 1000);
}
else{div.innerHTML="";}
}
//loop();
</script>
</head>
<body onload="loop()">
<span id="init_panel" style="visibility:visible; position:absolute; left:0px; top:0px;"></span>
</body>
</html>

**siluaty** · 02-26-2013 05:14 PM

Hi Padonak!

Thanks for your answer. Your code (apart from commenting the loop() call that was in duplicate), at first sight seamed to solve my problem! However, in fact the problem is persistent.
With your code, if the clicks are consecutive, i.e. with an interval of less than one second, the init_match() function is called with a very high rate of success, but that's because the loop() is almost not reached...

I'm interested in the 1st click that is done by the user usually after some amount of seconds since the page has loaded, while there were various updates of the loop() function... For this case (the 1st click) your code behaves with an equal rate of success as mine... which has a very strange behavior, hasn't it?

If someone can give me anymore help I would be grateful.

**siluaty** · 02-27-2013 09:27 AM

Hello, finally, after many attempts, I've found a solution:

I had to replace the line:

Code:

	var HTML = "<div class='links' onclick='init_match();'><font color='black'><b>new match!</b></font></div><br />";

by:

Code:

	var HTML = "<div class=\"links\" onclick=\"init_match();\"><font color=\"black\"><b>new match!</b></font></div><br>";

because the innerHTML of the div is automatically changed to the 2nd line when I insert the 1st line, so, when the code was comparing my HTML with the automatically generated HTML, it was refreshing the HTML even when it should be quiet, breaking the link sometimes.
The logic of the code was correct, and that error had a very stange behavior, and a non logic solution.
It's weird the fact that javascript changes <br /> to <br> (why?) and it also changes the quotes...

**Padonak** · 02-27-2013 02:39 PM

it can change people... who cares about a couple of chars? )))

Thread: onclick function sometimes doesn't fire its event

Thread Tools

Display

onclick function sometimes doesn't fire its event

[resolved]

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions