在 JS 中获取被点击元素的 ID

Question

I am trying to build a website and I ran into a problem I have this Bootstrap Carousel with different products and when they are clicked they should redirect to the page with that particular product so I am trying to make it but since every carousel item has different stuff it is kinda hard to write and change the links. SO I thought of surfing the net with this problem, but failed to find any answers if anybody knows the answer please consider helping me....

Answer 1

In the handler, use:

event.target.id

or

this.id

Example:

<img id="product1" src="product1.png" onclick="toProductPage(event)"/>
<script>
   function toProductPage(event){
      location="product.php?id="+event.target.id;
   }
</script>

or in a shorter form:

    <img id="product1" src="product1.png" onclick="location='product.php?id='+this.id"/>

Note that 'event' can be a global variable.

Answer 2

So in order to keep track of what items are coughed you have to add what's called an "event listener", think of it like asking someone to wait and "listen" for a particular thing to happen, and when it does, then do something

That's what we need to set up, an event "listener" that waits for a particular button/buttons to be "clicked", and when they are clicked, do something

To do this you need a reference of your HTML button in JavaScripts, one way to do this is to give the element an ID, then that ID can be accessed directly as a global variable in JavaScript, which let's you and this "event listener" to the particular button, to wait for it to be clicked

Then when it is clicked, we can get all the information of the button we want, or do any kind if action that JavaScripts can do

So

<Button id="hi"></button>
<Script>
hi.addEventListener("click", function (event) {
    console.log("clicked this button!!! ", event)
})
</Script>

Then check the console for more information on the event. Obviously you can also add these event listener from an array of buttons with the same class if you loop through the array and add it to each one, just call . addEventListener to each button object and you're good to go, all the information and attributes can be accessed from the event object, either event.target, event.srcElement etc, just see the console for all the properties