change background with every click

Question

My problem is that when I click on the TR tag, it shows a color, and when I click again, the background color goes, and so far so good. But when I click again, the color does not show where is the problem??

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
$('.tr').click(function() {
  $('.tr').css("background-color", "");
  $(this).css({
    "background-color": getRandomColor()
  });
  $(this).click(function() {
    $(this).css("background-color", "initial");
  });
})

user_11869100 · Answer

just removed a little bit of your code and added the css user-select: none; to prevent text-selection after multiple clicks.

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
$('.tr').click(function() {
   console.log(getRandomColor())
  $('.tr').css("background-color", getRandomColor());
})

td {
 user-select: none;
}

hint: be aware to switch the font color to a white one, when the backgroud is too dark. Maybe there is a jQuery method to detect the contrast.

user_2181514 · Answer

Nesting click events is generally a bad idea as they often don't work as expected.

In this case,

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

isn't replacing the initial $(".tr").click so they both run every time after the 1st click.

One option would be to use .off("click") and add the other handler, but it's a bit messy.

Normally, I'd suggest using toggleClass to set your background, but as it's a random colour, that's not an option.

However, you can still add a class (or use .data(.., ..)) to indicate if it needs resetting:

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

$('.tr').click(function() {
  // clear rows
  $('.tr')
  .css("background-color", "")
    .not(this)
    .removeClass("random");

  if (!$(this).hasClass("random")) {
    $(this).css({
        "background-color": getRandomColor()
      })
      .addClass("random");

  } else {
    $('.tr').removeClass("random");
    // no need to reset $(this).background-color as reset above

  }
});

.random {
  /* nothing here */
}

user_5436211 · Answer

You can use a hasColor as a boolean to tracking status.

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

$('.tr').click(function() {
  var hasColor = $(this).attr('hasColor');
  if (!hasColor) {
    var hasColor = $(this).attr('hasColor', true);
    $(this).css({
      "background-color": getRandomColor()
    });
  } else {
    var hasColor = $(this).attr('hasColor', '');
    $(this).css("background-color", "");
  }
})

change background with every click

3 Answers