JQuery .click() not selecting elements

Question

I'm doing the freeCodeCamp Simon Game challenge (JSfiddle). I can't work out why my .click() isn't working at all. I've used this for all of my other projects without issue.

The HTML is here:

    <span class="title-label">designed and coded by <a href="http://www.daveingles.com" id="linkedIn" target="_blank">Dave Cook</a></span>
      </div>
<div class="main">

  <div class="button-holder">


    <div class="quarter red">
      <div id="red"></div>
    </div>
    <!--quarter red-->
    <div class="quarter yellow">
      <div id="yellow"></div>
    </div>
    <!--quarter red-->
    <div class="quarter green">
      <div id="green"></div>
    </div>
    <!--quarter red-->
    <div class="quarter blue">
      <div id="blue"></div>
    </div>
    <!--quarter red-->
    <div class="center">
      <h1 id="simon">Simon</h1>
      <div class="center-row">
        <div class="center-cell">
          <div class="screen">--</div>
        </div><!--cell-->
        <div class="center-cell">
          <div class="btn r"></div>
          </div><!--cell-->
        <div class="center-cell">
          <div id="strict-light"></div>
        <div class="btn y"></div>
          </div><!--cell-->
        <div class="center-cell">
            <span>COUNT</span>
          </div><!--cell-->
        <div class="center-cell">
       <span> START</span>
          </div><!--cell-->
        <div class="center-cell">
        <span>STRICT</span>
          </div><!--cell-->

      </div><!--center-row-->
      <div class="bottom-row">
        <div class="center-cell">
          <span>OFF</span>
        </div>
        <div class="center-cell">
          <div class="off-on">
            <div id="switch"></div>
          </div>
        </div>
        <div class="center-cell">
          <span>ON</span>
        </div>
      </div><!--bottom-row-->

    </div>
    <!--center-->
  </div>
  <!--button-holder-->
</div>
<!--main-->

This is the JavaScript:

$("*").click(function(){
  console.log($(this));
  activateSection("red");
});

$("#yellow").click(function(){
  console.log($(this));
  activateSection("yellow");
});

The first click function works fine so I can be sure that JQuery is installed and the syntax is correct. Whenever I try to put a specific class or id in the element selector, nothing happens.

Could this have something to do with using z-index on the elements? — Dave Cook
– Dave Cook, Commented Aug 18, 2017 at 1:52
Well spotted! I've updated this now setting height and width to 100% each but it's not made any difference. — Dave Cook
– Dave Cook, Commented Aug 18, 2017 at 2:05
When right-clicking and pressing 'inspect element', the element doesn't show automatically, I can only see <body> and <html> sections initially. I assume this is caused by the same issue. — Dave Cook
– Dave Cook, Commented Aug 18, 2017 at 2:08

Dave Cook · Accepted Answer · 2017-08-18 02:15:31Z

1

It turns out that it was having the z-index of the clickable elements as < 0, meaning that they were effectively covered by the <body> and <html> elements.

I've since made the z-indexes positive and this is working.

answered Aug 18, 2017 at 2:15

Dave Cook

7272 gold badges6 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tree Nguyen · Accepted Answer · 2017-08-18 01:52:25Z

0

I think the problem lays with how you style your circle. I inspect your jsfiddle and figure out that your #red's size is 200ish x 0, which basically means it doesn't even have a body for you to click and interact. In the mean time, your .quarter.red have a size, so maybe trying to click on it?

Solution:

$(".quarter.red").click(function(event) {});

answered Aug 18, 2017 at 1:52

Tree Nguyen

1,1992 gold badges16 silver badges40 bronze badges

Comments

lscmaro · Accepted Answer · 2017-08-18 02:48:20Z

0

There is a lot going on here with your z-index . It's causing all you issues. I've made changes to your .quarter .center .main .button-holder to get that right. I also changed your click selector for the red or yellow class.

You should never go negative with z-index it's is very rare to have a good reason to do that, in my experience.

here is the updated version: https://jsfiddle.net/44xh92ny/3/

answered Aug 18, 2017 at 2:48

lscmaro

1,07510 silver badges23 bronze badges

Collectives™ on Stack Overflow

JQuery .click() not selecting elements

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related