Search code examples
cssdartdart-html

onClick backgroundColor change

im starting with dart and i got my first issue.

I wanted to make coloring Rows when some1 click on it.

Default i got backgroundColor white, when i click it changes to yellow, but when i click while it's yellow, it doesn't change again to white

Code:

 void changeText(MouseEvent event) {
  if(querySelector("#Column_1").style.backgroundColor == 'Yellow')
    querySelector("#Column_1").style.backgroundColor = 'White';

  else querySelector("#Column_1").style.backgroundColor = 'Yellow';
}
Solution

  • The values are returned lowercase even when you set them uppercased. The comparsion fails if they are not the same.

    void changeText(MouseEvent event) {
  var col = querySelector('#Column_1'); 
  if(col.style.backgroundColor.toLowerCase() == 'white') {
    col.style.backgroundColor = 'yellow';
  } else {
    col.style.backgroundColor = 'white';
  }
}

    I don't know why I didn't get any value back previously from the style attribute, but this works for me now.

    I would suggest to use CSS and classes instead anyway.

    When you put this in the <head> of your HTML or into your CSS file if you use one 

    <style>
  .isSelected {
    background-color: yellow;
  }
</style>

    and change your textChange method to

    void changeText(MouseEvent event) {
  var col = querySelector('#Column_1').classes.toggle("isSelected");
}

    you should get your desired effect.