jQuery not updating variable info

Question

There are two divs with class of .egg. The user is supposed to click on the div they want to change the background color of and then click the color for the div's new background. Two steps total. I've written a jQuery function to capture the id of the div chosen for the background change and then the id for the color to change to background. Works great, except that when the new div is selected, to change the background color, the previously selected div id is still stored in the variable called clickedId.

To try to fix this problem, I have set clickedId = ''; after the background has been changed for the selected div. However when a new div is selected, it doesn't work anymore. The console says Cannot read property 'style' of null. It looks like the first part of the code, $(".egg").click(function() {... isn't be executed for new div selections.

Does anyone have any suggestions or advice for this? Thanks in advance!

jQuery Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      //Select the div to change the background color
      $(".egg").click(function() {
          var clickedId = $(this).attr("id");

        //Updating the background color for selected div
        $(".color").click(function() {
            var clickedColor = $(this).attr("id");
            if(clickedColor == 'red'){
              document.getElementById(clickedId).style.backgroundColor = "red";
              clickedId = '';
              return;
            }else if(clickedColor == 'blue'){
              document.getElementById(clickedId).style.backgroundColor = "blue";
              clickedId = '';
              return;
            }else if (clickedColor == 'yellow') {
              document.getElementById(clickedId).style.backgroundColor = "yellow";
              clickedId = '';
              return;
            }else{
              document.getElementById(clickedId).style.backgroundColor = "white";
              clickedId = '';
              return;
            }
          });
       });
     });
    </script>

HTML Code:

<body>
    <div id="egg-main">
      <div id="left-egg"></div>
      <div id="center-egg1" class="egg" onclick="semi_left()"></div>
      <div id="center-egg2" class="egg" onclick="semi_right()"></div>
      <div id="right-egg"></div>
      <div id="bottom">
        <div id="red" class="color"></div>
        <div id="blue" class="color"></div>
        <div id="yellow" class="color"></div>
        <div id="white" class="color"></div>
      </div>
    </div>
    <script src="demo.js"></script>
  </body>

Why? You already know the element you're in-why bother getting it again, in a different way, to change the color? — Dave Newton
– Dave Newton, Commented Nov 1, 2017 at 14:40

Millica · Accepted Answer · 2017-11-01 15:00:15Z

1

Why it's not working

It looks like the problem is that the event listener for .color is declared inside the event listener for .egg. This means that every time you click .egg a new event handler is being created for .color.

The second time you click on a .color it is still running the event from the first time you clicked it. And, since you have changed the id to '', a getElementById('') is indeed null.

Possible Solution

Move the .color event listener outside the .egg event listener. You'll also have to change the scope of the clickedID variable.

$(document).ready(function(){
  var clickedId = '';

  //Select the div to change the background color
  $(".egg").click(function() {
      clickedId = $(this).attr("id");
      alert(clickedId);
  });

  //Updating the background color for selected div
  $(".color").click(function() {
      var clickedColor = $(this).attr("id");
      if(clickedId != '') document.getElementById(clickedId).style.backgroundColor = clickedColor;
  });
});

edited Nov 1, 2017 at 15:00

Millica

16812 bronze badges

answered Nov 1, 2017 at 14:38

smilebomb

5,5239 gold badges54 silver badges86 bronze badges

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

3 Comments

Millica Over a year ago

Thanks for your reply. I had it like that before, but then the value for clickedId didn't carry over. I tried to make it global, but I must have done something wrong because it didn't work. Do you have any advice? When you say to change the scope, what exactly do you mean? Thanks again!

smilebomb Over a year ago

@Millica I've added code. Changing the scope is a pretty significant issue in javascript. I'd take the time to understand it. w3schools.com/js/js_scope.asp

Millica Over a year ago

You're a star! Thank you so much for your help! I'll also check out the link you suggested. The more you know... :) Thanks again!!

Collectives™ on Stack Overflow

jQuery not updating variable info

1 Answer 1

Why it's not working

Possible Solution

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Why it's not working

Possible Solution

3 Comments

Related