CODEWITHSUNDEEP
cssdartdart-html
Zeronader
Zeronader

Reputation: 95

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';
}

Upvotes: 2

Views: 266

Answers (1)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657058

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.

Upvotes: 1

Related Questions