setInterval Function - Inquiry

Question

I need help with getting a "setInterval(function(){}" function to work with my code.

The function should display a popup message when the number of yellow cells equals the number of red cells. I've include my code below and a picture of the concept. Help Please! :-)

Here is the JavaScript that I want to do the popup message.

setInterval(function(){ 
var reds = document.getElementByClassName('red_block')
var yellows = document.getElementByClassName('yellow_block')
if(reds.length == yellows.length){
alert("what ever")
}
}, 1);

Here is the code that I have right now.

    $(document).ready(function() {

      var color = "White";
      $("#btnWhite").click(function() {
        color = "#FFFFFF"
      });
      $("#btnYellow").click(function() {
        color = "#FFFF00"
      });
      $("#btnRed").click(function() {
        color = "#FF0000"
      });


      $("table tr td").click(function() {
        $(this).css("background-color", color);
      });


    });

        body {
          padding: 5px;
        }
        
        label {
          font-weight: bold;
        }
        
        input[type=button] {
          padding: 10px 16px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 16px;
        }
        
        p {
          margin: 1em 0 0;
        }
        
        td.pz {
          border: thin solid #000000;
          width: 59px;
          height: 57px;
          background-color: #FFFFFF;
        }
        
        .red_block {
          border: thin solid #000000;
          width: 59px;
          height: 57px;
          background-color: #FF0000;
        }
        
        .yellow_block {
          border: thin solid #000000;
          width: 59px;
          height: 57px;
          background-color: #FFFF00;
        }
        
        td.padding {
          width: 59px;
          height: 57px;
        }

showdev · Accepted Answer

I suggest using the CSS classes you've defined, rather than setting a background color directly. That way, you can count the blocks that have each class. For efficiency, I also suggest counting after each click, rather than using a timer to count periodically.

I've also added a data attribute to each button to help reduce code redundancy. When any button is clicked, the "brush" is set to the color class associated with that button. That class will subsequently be applied to any clicked block.

jQuery(function() {

  var brush = "white_block";

  jQuery('input.block').on('click', function() {
    brush = jQuery(this).data('brush');
  });

  jQuery('td').on('click',function() {

    jQuery(this).removeClass('white_block yellow_block red_block').addClass(brush);

    var reds = jQuery('.red_block').length,
        yellows = jQuery('.yellow_block').length;

    if (reds == yellows) {
      console.log('MATCH');
    } else {
      console.log('MISMATCH');
    }

  });

});

.block {
  border: thin solid #000000;
  width: 59px;
  height: 57px;
}
.white_block {
  background-color: #FFFFFF;
}
.red_block {
  background-color: #FF0000;
}
.yellow_block {
  background-color: #FFFF00;
}

table {
  margin:1em 0 0;
}

setInterval Function - Inquiry

Answers (2)

Related Questions