CODEWITHSUNDEEP
javascripthtmleventsonclick
Michael Haydn
Michael Haydn

Reputation: 13

JavaScript onclick event works only as double-click

I'm writing because I need to solve this problem. Until recently, the code was working just fine and I've been using it for quite a long time, but yesterday, when I was testing the page, everything changed.

The idea is click on an image with an anchor tag that is going to redirect the user to another page and in doing so, a confirm dialog box should pop up to ask the person whether they want that. I haven't changed anything in the code, so I'm not getting what's happening. Here's the code:

// **JavaScript**
function confPopUp() {
  for (var i = 0; i < 6; i++) {
    document.getElementsByClassName("redPic")[i].onclick = redConf;
  }
}

function redConf() {
  var conf = confirm(
    "You're about to be redirected to our social media page. Do you accept?"
  );
  if (conf) {
    return true;
  } else {
    return false;
  }
}

window.onclick = confPopUp;
<!-- **HTML** //THERE ARE 5 MORE ELEMENTS WITH THE CLASS NAME "redPic". -->

<a href="https://www.madridsolutions.es" target="_blank"><img class="redPic" src="images/instagramLogo.png" alt="Instagram Logo"></a>

The problem is that I'm testing it, right now, and it's not working properly, a the day before yesterday it was working fine, only one click and now, it's working as double-click. I'd appreciate your help, thanks.

Upvotes: 1

Views: 3732

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074028

When the page first loads, you're setting a single event handler:

window.onclick=confPopUp;

Later, when there's a click anywhere in the window, that runs your confPopUp function, which hooks up the click handlers on the .redPic elements.

Later, if you click a .redPic element, your redConf function runs.

If you want the .redPic elements to have their handlers hooked up on page load, call confPopUp instead of making it a click handler. Change:

window.onclick=confPopUp;

to

confPopUp();

Be sure this code is running after the .redPic elements exist. There are several ways to do that, pick the one that suits your target browsers and preference:

  1. Put the code in a script tag at the end of the document, just before the closing </body> tag. This works with all browsers, no matter how old.

  2. In even vaguely-modern browsers, call confPopUp from a DOMContentLoaded event handler:

    document.addEventListener("DOMContentLoaded", confPopUp);

  3. In modern browsers, add a defer attribute to your script tag.

  4. In modern browsers, add type="module" to your script tag to make your script a module. That defers it just like defer does, and puts it in strict mode (which is a good idea), and put the code in it in module scope rather than global scope (which is really crowded).

So why did it seem to work yesterday? Presumably, because you were clicking the window without realizing it, triggering that initial event handler that hooked up the .redPic elements. Today it just happened that you didn't click the window before trying to click a .redPic element, so you discovered this problem. The problem's been there all along.

Upvotes: 3

Related Questions