www.webdeveloper.com
Results 1 to 5 of 5

Thread: onclick function sometimes doesn't fire its event

Hybrid View

  1. #1
    Join Date
    Feb 2013
    Posts
    5

    onclick function sometimes doesn't fire its event

    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!

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    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>

  3. #3
    Join Date
    Feb 2013
    Posts
    5
    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.

  4. #4
    Join Date
    Feb 2013
    Posts
    5

    resolved [resolved]

    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...

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    it can change people... who cares about a couple of chars? )))

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles