/    Sign up×
Community /Pin to ProfileBookmark

Can anybody explain this…

Copy linkTweet thisAlerts:
Jul 07.2020

Thanks to Google I have been a skilled copy-paste-javascript-coder. That means I get it sometimes to work, but I have no clue why 😆 .

I search for a solution to select a entire row in a table. I found this:

“`
var select = table.getElementsByClassName(‘select’)
table.addEventListener(‘click’, function(event) {
if (select[0]) select[0].className = ”;
const row = event.target.parentNode;
row.classList.add(“select”)
});
“`

Works almost perfect, but this row I need some explanation:

`if (select[0]) select[0].className = ”;`

I guess that this deselects selected rows. By iteration or not.

http://jsfiddle.net/hqd2u6mn/11/

Can anybody explain what happens? What is this row called? How does it work behind the code?

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@sibertauthorJul 07.2020 — ["Can you explain this...","Can anybody explain this..."]
Copy linkTweet thisAlerts:
@SempervivumJul 07.2020 — The variable `select</C> contains a nodelist and this nodelist is live, i. e. it contains that row of the table that has the class "select".<br/>
When a new row is selected the old one has to be deselected. This is done by the line you quoted:<br/>
<C>if (select[0]) select[0].className = '';</C><br/>
As only one row can be selected, the variable <C>select</C> contains only one element and it can be accessed with index 0.<br/>
Removing the class this way is not recommendable as it removes <STRONG>**all**</STRONG> classes including those who are necessary for styling. You better use <C>classList.remove`.

For reasons of clarity I for myself would get the row that is currently selected inside the eventlistener like this:
table.addEventListener('click', function(event) {
var select = table.getElementsByClassName('select');
if (select[0]) select[0].classList.remove('select');
const row = event.target.parentNode;
row.classList.add("select")
});
Copy linkTweet thisAlerts:
@sibertauthorJul 08.2020 — > @Sempervivum#1620344 the variable select contains only one element and it can be accessed with index 0.

Thank you!

If I interpret this correct, it is at the same time another way of writing an if statement?

Googling again and found this:
``<i>
</i>if(condition){
do_something_if_condition_is_met;
}
else{
do_something_else_if_condition_is_not_met;
}<i>
</i>`</CODE>
Can be written as:

<C>condition ? do_something_if_condition_is_met : do_something_else_if_condition_is_not_met;
`

A one-liner if statement? Correct?
Copy linkTweet thisAlerts:
@SempervivumJul 08.2020 — Yes, this is correct.
Copy linkTweet thisAlerts:
@SempervivumJul 08.2020 — PS: This short form is mainly used for assigning a value to a variable:

`var2 = var1 == 7 ? var3 : var4;</C><br/>
or for handing over a value to a funktion:<br/>
<C>func1(var1 == 7 ? var3 : var4);`
×

Success!

Help @sibert spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...