“variable” as switch statement does not work?

@sibertMay 17.2022

I have two dropdown lists in a table. Each of them have a class “status” and “more”.
When I try to use this class in a switch statement, it does not work. Why?

This work:

“` window.addEventListener(“click”, (event) => { let row = event.target.closest(‘tr’); id = row.dataset.id const menu = “more” switch (menu) { case “more”: alert(menu) more(id) break; case “new”: status(id) break; } }); “`

But this does NOT work (the variable is not evaluated):

“` window.addEventListener(“click”, (event) => { let row = event.target.closest(‘tr’); id = row.dataset.id const menu = (event.target.classList) <—–valid result logged switch (menu) { case “more”: alert(menu) more(id) break; case “new”: status(id) break; } }); “`

What am I doing wrong?

to post a comment

JavaScript

14 Comments(s) _↴

@SempervivumMay 17.2022 — #`event.target.classList

</C> is an object, not a string, therefore none of the cases in your switch will match. You will have to query the classes separately:
 <CODE>

<i>
 </i>if (event.target.classList.contains('more')) {
 // do something
 } else if (event.target.classList.contains('new')) {
 // ...
 }<i>
 </i>

</CODE>
 Or, when you are shure that there is only one class assigned to that element, you might query it like this:
 <CODE>

<i>
 </i>switch (event.target.getAttribute('class')) {
 // ...
 }<i>
 </i>

``
However there will be some risk when doing so: It will fail when you decide to add an additional class later on.

@tracknutMay 17.2022 — #Isn't classList a *list* of all the classes, and not a single class name? It seems you'd need to loop thru all the classes, even if there was only one, and do the switch on each class rather than the list.

@sibertauthorMay 17.2022 — #> @Sempervivum#1644095 switch (event.target.getAttribute('class')) {

Yes, this works - thank you. But the next problem is one level down. The menu items

``<i>
 </i>window.addEventListener("click", (event) =&gt; {
 let row = event.target.closest('tr');
 let menu = (event.target.getAttribute("class"))
 let item = (event.target.getAttribute("data-id")) &lt;------- is this an object? 
 let id = row.dataset.id
 alert("let "+item) &lt;-----------------------here item value is correct
 switch (menu) {
 case "more":
 alert("more "+item) &lt;--------------null value
 more(item,id)
 break;
 case "status":
 status(id)
 break;
 default:
 alert("wrong") &lt;-----------------------here item is empty and the result is default
 }
 });
 
 function more(item,id) {
 alert(item)  &lt;---------NULL
 switch (item) {
 case "edit":
 edit(id)
 break;
 case "del":
 del(id,row)
 break;
 }
 }<i>
 </i>``

How do I pass the value of (event.target.getAttribute("data-id")) to the next function?

@SempervivumMay 17.2022 — #You add the event listener to `window` thus it will fire when the user clicks anywhere. And when he clicks outside the table there will be no data attribute. Therefore IMO the behavior of your code is correct.

@sibertauthorMay 17.2022 — #> @Sempervivum#1644107 And when he clicks outside the table there will be no data attribute. Therefore IMO the behavior of your code is correct.

But why is the value correct here? And why can I not pass it to the next function?

``<i>
 </i>  let item = (event.target.getAttribute("data-id")) &lt;------- is this an object? 
 let id = row.dataset.id
 alert("let "+item) &lt;-----------------------here item value is correct<i>
 </i>``

@SempervivumMay 17.2022 — #IDN. Seems to me that one would have to know more about the context of this code. Can you provide a demo on jsfiddle?

@kyungmi8May 19.2022 — #Baccarat is called the king of casino games,

BACCARAT SITE

If you want to enjoy baccarat and casino , enter the world of live casino now !

Baccarat is called the king of casino games, and it is a card game in which a player or banker chooses one of them and plays with a high score of 9 or less (in some cases, a customer and a customer, a customer and a dealer ) . Baccarat site is a term that refers to websites where you can play baccarat online. Since there are so many sites on the Internet, baccarat sites have a lot of scams. Therefore, in order to win a fair game, it is necessary to look at various factors such as the number of years of operation of the baccarat site, its size, recognition, and the size of its distributors. Numerous companies are introducing live baccarat and hotel casino game methods. Customers can directly communicate with the dealer and avatar. Enjoy real baccarat through our

https://www.casinosite.link

@sibertauthorMay 20.2022 — #> @Sempervivum#1644109 one would have to know more about the context of this code. Can you provide a demo on jsfiddle?

OK. Here is a fiddle:

https://jsfiddle.net/mp31y0nh/3/

I think the problem is that the menu information disappear when selecting a li element.

``<i>
 </i>  let row = event.target.closest('tr');
 let menu = (event.target.getAttribute("class")) 
 let item = (event.target.dataset.id)
 let id = row.dataset.id
 alert("correct li key value " + item) &lt;--- here is the key of li correct
 switch (menu) {
 case "more":
 alert("the problem is here " + item) 
 more(item, id)
 break;
 case "status":
 status(item, id)
 break;
 default:
 }<i>
 </i>``

How do I pass this key and table id to another function?

@SempervivumMay 20.2022 — #It seems to me that it is advisable to make the event listener more verbose in order to make clear what happens:

``<i>
 </i>        window.addEventListener("click", (event) =&gt; {
 const
 // Provide elements being needed at first level:
 row = event.target.closest('tr'),
 ulPopMore = event.target.closest('ul.popmore'),
 ulPopStatus = event.target.closest('ul.popmore');
 // Now check which element was clicked:
 // Was a row in the table clicked?
 if (row) {
 const
 // Provide elements being needed for further processing:
 menu = event.target.getAttribute("class"),
 id = row.dataset.id;
 switch (menu) {
 case "more":
 // Add ID of element to ulPopMore as a data attribute:
 ulPopMore.dataset.id = ID;
 break;
 case "status":
 // Add ID of element to ulPopStatus as a data attribute:
 ulPopStatus.dataset.id = ID;
 break;
 }
 }
 // Was an item in the ul for "more" clicked?
 if (ulPopMore) {
 const
 action = event.target.dataset('action'),
 id = ulPopMore.dataset('id');
 switch (action) {
 case "edit":
 edit(id);
 break;
 case "del":
 delete (id);
 break;
 }
 }
 if (ulPopStatus) {
 const
 action = event.target.dataset('action'),
 id = ulPopStatus.dataset('id');
 switch (action) {
 case "active":
 active(id)
 break;
 case "done":
 done(id)
 break;
 }
 }
 });<i>
 </i>``

I didn't extend the code completely nor did I test it.

@SempervivumMay 20.2022 — #PS: I looked into the code again and noticed that I was completely wrong: These divs containing an ul at the bottom of the html are only templates and the real menus being created by tippy are children of the table row. This makes thing much easier as the ID is available in the tr element:

``<i>
 </i>        var popdata = JSON.parse(json);
 popdata.forEach(buildNewList);
 
 
 function buildNewList(item, index) {
 var ul = document.querySelector(".popmore");
 var li = document.createElement("li");
 li.dataset.action = item.key;
 li.appendChild(document.createTextNode(item.value));
 ul.appendChild(li);
 }
 
 window.addEventListener("click", (event) =&gt; {
 const
 // Provide elements being needed at first level:
 row = event.target.closest('tr'),
 id = row.dataset.id,
 ulPopMore = event.target.closest('ul.popmore'),
 ulPopStatus = event.target.closest('ul.popstatus');
 // Now check which element was clicked:
 // Was an item in the ul for "more" clicked?
 if (ulPopMore) {
 console.log('id=' + id);
 const
 action = event.target.dataset.action;
 switch (action) {
 case "edit":
 edit(id);
 break;
 case "del":
 del(id);
 break;
 }
 }
 if (ulPopStatus) {
 console.log('id=' + id);
 const
 action = event.target.dataset.action;
 switch (action) {
 case "active":
 active(id)
 break;
 case "done":
 done(id)
 break;
 }
 }
 });
 
 function edit(id) {
 console.log("edit record" + id)
 }
 
 function del(id) {
 console.log("delete id " + id)
 }
 
 function active(id) {
 console.log(id)
 }
 
 function done(id) {
 console.log(id)
 }<i>
 </i>``

@sibertauthorMay 20.2022 — #> @Sempervivum#1644151 event listener more verbose in order to make clear what happens:

I did not help. Still no menu adressed when click on li

https://jsfiddle.net/mxwb8fsL/9/

Or do I misunderstand something?

@SempervivumMay 20.2022 — #Our postings crossed. Please read my latest one.

@sibertauthorMay 20.2022 — #> @Sempervivum#1644156 Please read my latest one.

It is about the same. switch (action) "action" does not contain any valid data.

https://jsfiddle.net/zfkva903/7/

@SempervivumMay 20.2022 — #Additionally I changed the name of a data attribute to "action". Not sure if this was correct from the semantical point of view but it helped me to understand the code. This works now:

https://jsfiddle.net/Sempervivum/m0xctgzj/1/

Also in #JavaScript _↴

Image Preload for Rollover Effect Text Field to URL JS Photo Gallery question...

Success!

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

Tweet This

“variable” as switch statement does not work?

14 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

“variable” as switch statement does not work?

14 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #JavaScript _↴