'Why does my click counter only count the first click?

I have a website that does wiki speed runs. I have a mode that is called wiki golf. the goal of the game is to get to the jesus wikipedia page in under 5 clicks from a random page. Right now this code is working, but only runs once. (the click counter only goes to one and then stops.) The code is counting how many times you click inside of an iframe.

    <head>
    <script src="https://code.jquery.com/jquery-3.1.1.js">

    </script>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/game/game.css">
    <script src="/game/game.js">

    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
     crossorigin="anonymous" referrerpolicy="no-referrer" />

</head>
<div id="message"></div>
<div id="invisible_layer">

</div>
<iframe src="https://en.wikipedia.org/wiki/Special:Random"  id="mainFrame" style="position:relative; top:0; left:0; bottom:0; right:0; width:100%; height:80%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"></iframe>
</div>
<title> Wiki Golf | WikiRun </title>


<style>
    #invisible_layer {
        position: absolute;
        background-color: trasparent;
        width: 500px;
        height: 300px;
    }
</style>

</html>
<div class="stopwatch">
    <p>
        <h1>
            <b> Good Luck!! </b>
   </h1>
  </p>
  </div> 
  <p>Clicks: <a id="bellow">0</a></p>
</a>


  <script>
  let count = 0;
  
var myConfObj = {
  iframeMouseOver : true
}
window.addEventListener('blur',function(){
  if(myConfObj.iframeMouseOver){
    count += 1;
     document.getElementById("bellow").innerHTML = count;

  }
});


document.getElementById('mainFrame').addEventListener('mouseover',function(){
   myConfObj.iframeMouseOver = true;
});
document.getElementById('mainFrame').addEventListener('mouseout',function(){
    myConfObj.iframeMouseOver = false;
});
</script>

</script>
javascripthtmliframe


Solution 1:[1]

It's because you're triggering the click count increase on a "blur" event, which, I suppose, only fires once when you first click into the iframe and then never again because the iframe is still focused. Why don't you use a simple "click" event instead?

document.querySelector('iframe').addEventListener('click',function(){
  if(myConfObj.iframeMouseOver){
    count += 1;
     document.getElementById("bellow").innerHTML = count;

  }
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 DavidsKanal

Related Questions