JS get value with onClick on div element (dropdown)

Question

In my div i have list of items:

<div id="itemList" class="dropdown-content">
<a value="1">item1</a>
<a value="2">item2</a>
<a value="3">item3</a>
<a value="121">item4</a>
<a value="131">item5</a>
<a value="141">item6</a>
</div>

So when i click on item3 i would like to take value(3) by JS.

Possible duplicate of [How do I get the value of text input field using JavaScript?](https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript) — pellul, Apr 03 '19 at 00:58
Possible duplicate of [Get selected value in dropdown list using JavaScript?](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — Tebogo Khanye, Apr 03 '19 at 00:58

score 0 · Answer 1 · answered Apr 03 '19 at 01:15

yes 2019 => use event delegation... and dataset

document.querySelector('#itemList').onclick = function(evt) {
  if (!evt.target.matches('a')) return;
  evt.stopPropagation();

  alert(evt.target.dataset.value);  
}

.dropdown-content a {
  display: block;
  float: left;
  clear: both;
  margin: 1px;
  padding: 2px 10px;
  background-color:lightblue;
  cursor: pointer;
}

<div id="itemList" class="dropdown-content">
  <a data-value="1">item1</a>
  <a data-value="2">item2</a>
  <a data-value="3">item3</a>
  <a data-value="121">item4</a>
  <a data-value="131">item5</a>
  <a data-value="141">item6</a>
</div>

JS get value with onClick on div element (dropdown)

1 Answers1