Getting the ID of a section

JavaScript
1

Hello everyone, I’m currently coding the javascript for an e-commerce website and using javascript to add the html for each product using a loop. This means that for each product I have a delete button like this :

<p id="delete" class="${productTitle}" onclick="removeItems()">Delete</p>
I would like to recover the class of this to then use it to remove the product it is refering from the local storage but because I have a loop if I have a function such as 
function removeItems() {
  console.log(${productTitle}); 
}

I am only getting the last assigned value of ${productTitle}
How can I make sure that I get the correct class that the button is using please?

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
3

thank you, I’m new here sorry I didn’t realise!

5

Ofcourse, here is a link to the whole js code :slight_smile:

Thanks in advance, I’ve been stuck for ages!

6

This is slightly off topic, but I couldn’t help myself :slight_smile:

That is not a button. For accessibility, you should be using an actual <button> element. Adding a click handler to a p element does not make it accessible.

7

Yes good point! I’m doing this for coursework and the html was imposed, I’m not sure why they used

for this but I’ve kept it that way just incase they applied styles to it as I’m not supposed to touch the css for this site :slight_smile:

9

Oh wow. Hopefully there is a future lesson which teaches why using a p for a button is bad for accessibility. If not, I’d get a refund :slight_smile:

10

thank you very much! Fingers crossed we’ll manage to sort it out!

11

It would be nice with a working example (with the products).

You can get the event.target inside the handler to get the click target (the button). From there you can do DOM traversal to get to any element from the click target (parent, siblings). When you have the element you want you can look at the attributes or content of the element.

12

Haha it did seem odd but for the javascript side of things it shouldn’t change much I guess! I just can’t seem to figure out how to get it to work, here is a link to the github hosted code as it is currently if this helps: Kanap
as you’ll see, the console(log) is showing the same productTitle no matter which delete button is clicked on! :sweat_smile:

13

Here it is so far Kanap
As you’ll see the console gives out the same value of productTitle no matter which delete button is clicked…
I agree with you, that seems like a good way to do it but I just can’t seem to get it working :confused:

14

If you are going to assign the event handler using the onclick attribute then you can’t just call the function like that because you won’t have access to any of the event details, such as the button that was clicked. One way to get access to those details is to use an IIFE instead:

<button onclick='(function(e){removeItems(e);})(event);'>

Then add the event parameter to removeItems:

function removeItems(event) {

And now you have access to the actual button you clicked on through event.target and so you can find the class for the button and anything else you need to know about the button.

One other thing, if you are planning on having multiple delete buttons on the page at one time then you can’t give them all the same id of delete. ID’s are supposed to be unique on the page.

15

Thank you for taking the time to reply, with the code that you provided what can I add in the function in order to get the class? I will remove the on the article sections, it was just to test something I forgot to remove! :sweat_smile:

16

The IIFE is not needed. You can just specify event as the argument for the removeItems:

<div></div>
<button onclick='removeItems(event)'>

const div = document.querySelector('div');

['tv', 'couch', 'table'].forEach(function(productTitle) {
  div.innerHTML += `
    <p>
      ${productTitle}
      <button class="${productTitle}" onclick="removeItems(event)">Delete</button>
    </p>
  `;
});

function removeItems(event) {
  console.log(event.target.className) // displays the product title
}
1 Like
17

Ahh, of course you’re right. I guess I was thinking it couldn’t be that easy :slight_smile: I never use the onclick attribute and I guess I was thinking it had some limitations.

18

You do not actually need to pass or accept the event. You have access to the event object inside the handler, it is called event inside the handler. But I don’t think being explicit about it is bad.

I update a random Codepen I had with some quick button logic.

20

Well will you look at that!

22

This has worked, so simple but it gives me the correct product class! Thank you so much, I’ve been at this for ages!!

23

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.