CODEWITHSUNDEEP
web-applicationsdart
Felipe
Felipe

Reputation: 416

Dart Language: event.target

First, I would like to thank you all for the support.

I have a question regarding event triggers (event.target). The thing is, I have five buttons inside a webpage and all of them have unique ids (like #button1, #button2). The querySelector of all of them starts the same function: buttonClicked.

But I have a problem using the same function for all of the buttons: I can't identify which one was pressed, unless doing a check over "event.target.id". In this case, I would have to write a "switch" or a "if" to determinate it, but I would like to know if there's any other way I could define/determinate the pressed button without using "switch" or "if" or doing specific functions to each button.

Thanks for the help!

Upvotes: 0

Views: 429

Answers (2)

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

Reputation: 657338

Instead of this

quer

ySelector("#pos1").onClick.listen(positionClick);
  querySelector("#pos2").onClick.listen(positionClick);
  querySelector("#pos3").onClick.listen(positionClick);
  querySelector("#pos4").onClick.listen(positionClick);
  querySelector("#pos5").onClick.listen(positionClick);
  document
        ..getElementById("options_table_row_1").querySelectorAll("td").onClick.listen(optionClick)
        ..getElementById("options_table_row_2").querySelectorAll("td").onClick.listen(optionClick)
        ..getElementById("options_table_row_3").querySelectorAll("td").onClick.listen(optionClick)
        ..getElementById("options_table_row_4").querySelectorAll("td").onClick.listen(optionClick)
        ..getElementById("options_table_row_5").querySelectorAll("td").onClick.listen(optionClick)
        ..getElementById("options_table_row_6").querySelectorAll("td").onClick.listen(optionClick)
        ..getElementById("options_table_row_7").querySelectorAll("td").onClick.listen(optionClick)
        ..getElementById("o

ptions_table_row_8").querySelectorAll("td").onClick.listen(optionClick);

You should add a class to each elements/buttons that you want to be notified about click events which allows you to do

querySelectorAll('.pos-buttons').forEach((pb) => pb.onClick.listen(positionClick));
querySelectorAll('.opt-buttons').forEach((pb) => pb.onClick.listen(optionClick));

The content of the positionClick and optionClick seem to be already simplified. I can't see a switch or many if statements.

This is practicall what Robert already explained.

Upvotes: 0

Robert
Robert

Reputation: 5662

I assume you are doing this. This will simply call the function when any button is clicked.

querySelectorAll('...').onClick.listen(buttonClicked);

Of course you can do this:

['button1', ..., 'buttonN'].forEach((String id) {
  querySelector('#$id').onClick.listen((MouseEvent e) {
    Specific code here...
    id is still valid
  });
});

This iterates over a list of strings, queries the button and assigns a onClick listener.

Or even:

['button1', ..., 'buttonN'].forEach((String id) {
  querySelector('#$id').onClick.listen((MouseEvent e) => someButtonClicked(id));
});

That does almost the same thing as the one before, but now we return a new function when as the handler (=>) calls and "returns" the value from someButtonClicked.

Event Handlers:

buttonClicked(MouseEvent e) {

}

someButtonClicked(String id) {

}

But it really depends what you want to do!

See also:

For saving information you could do (assuming the button is in the cell):

When a button is clicked, you get the text from the cell and create a new object. Is that what you need?

querySelectorAll('td button').onClick.listen((MouseEvent e) {
  ButtonElement button = (ButtonElement) e.target;
  Cell c = new Cell(button.id, button.parent.text);
});

Regards Robert

Upvotes: 2

Related Questions