Event delegation help please!

Hello campers , I hope you are all very good
I did a search about event delegation ,I understood it
I am creating to do app using React js
I am putting a click event on select element
and when I click I couldn’t have the current element on which I am clicking
because I would like to add a class on it ,
to understand more please check out this url :


I found out that event delegation behaves differently on select form , is that correct or I am wrong ?
and what is the solution of this problem

function Select(props){
  return (
    <select onClick={props.onclick} style={chosentStyle}>
     <option>Choose one word</option>
     <option value="sport">sport</option>
     <option value="studing">studing</option>
     <option value="traveling">traveling</option>
     <option value="shoping">shoping</option>
     <option value="food">food</option>
     <option value="reading">reading</option>
     <option value="fishing">fishing</option>
     <option value="work">work</option>
    </select>
  )
}

I apperciate any help.

Use onChange inline event.
or

const $select = document.querySelector('select');
$select.addEventListener('change', runThisFunction);

I used onChange but when I click it refers to select element not option element .

I don’t know what you mean by “select element” and “option element”.

I changed your onClick to onChange, and whenever I select a value on the dropdown menu it updates the text above.

what I meant is when I click on the select form I would like to have in the console the element I am clicking on like this

<option value="sport">sport</option>

but it gives me the select form like this

<select id="work" >...</select>

go to this url to understand more what I meant ,check out the console

You want it to be that. The option selected,. becomes the value of the select.

use: console.log(e.target.value)

my purpose is if someone choose a word from the select element ,the option selected should be green so I 'd like to have that element to give it a class for example green
so I used e.target.classList.add(“green”) but the class is added to select element (parent)
not to the sepecified option
e.target.value gives me just the text associted with option not the the option element its self .

https://jsfiddle.net/mobs297q/

Is this your goal?

You still add the class to the select… but I’ve added a console.log() to the element you’re trying to select.

you are giving the whole select a class green in one click ,what I want is to give a class green to only the element I clicked on wich mean that it is chosen word .
for instance if I click on sport ,only sport would have the class green to have background green
and if I click food again only food would have green class to have a background green ,the rest still white untill I click on all of them ,everytime I click on an item that item will have the class green and so on so fourth .

Then just use:

const options = evt.target.options;
const selectedIndex = evt.target.selectedIndex;
options[selectedIndex].classList.add('green');

The problem with the above will not work with OSX users. Their select boxes are different.

You may want to try ul and lis instead.

thanks I apperciate your help ,this is what I wanted ,now I can give the class green or (activate) to only the element I am clicking on
event delgation behaves differently here .