Как сделать мини quiz с трех полей?

Question

[L1nw0od]

Добрый день, подскажите пожалуйста как сделать мини квиз с трех полей.
Есть 3 поля в "dropdown" у них есть классы item1, item2, item3 - как сделать так чтоб при клике на поле с классом item1, item2, или item3 в другом поле нам писали условно цэну. К примеру итем1 = 100, итем2 = 200, item3 - 300

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item item1" href="#">Item 1</a>
    <a class="dropdown-item item2" href="#">item2</a>
    <a class="dropdown-item item3" href="#">item3</a>
  </div>
</div>

Answer 1

[Denis Melnikov]

let divs = document.querySelectorAll("a.dropdown-item")
for (let el of divs) {
el.addEventListener("onClick", ВашаФункция)
}

Comments

[L1nw0od]

Подскажите пожалуйста а можно с помощью дата элементов присвоить цэну и функцией ее отображать?
По типу:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
		  <a class="dropdown-item" href="#" data-price="100">Action</a>
		  <a class="dropdown-item" href="#" data-price="200">Another action</a>
		  <a class="dropdown-item" href="#" data-price="300">Something else here</a>
  </div>
</div>

[Denis Melnikov]

L1nw0od, атрибут dataset , содерижт как раз все Data
el.dataset.price

[L1nw0od]

Denis Melnikov, Спасибо большое.
Но вот еще проблемка - я может где-то ошибку допустил - но почему не выводиться в консоль -?

let divs = document.querySelectorAll("a.dropdown-item")
for (let el of divs) {
el.addEventListener("onClick", result())
}

function result(){
console.log(el.dataset.price)

}

[Denis Melnikov]

Вы сюда result() ничего не передали.

function result(el){
console.log(el.dataset.price)

}

el.addEventListener("onClick", result(el))

[L1nw0od]

Denis Melnikov, Спс большое - последняя просьба. Как сделать так чтоб в консоль выводилось значение дата атрибута только того который нажали а не всех? В текущий момент выводяться все дата сет атрибуты

[Denis Melnikov]

L1nw0od,

<script>
      let divs = document.querySelectorAll("a.dropdown-item");
      for (let el of divs) {
        el.addEventListener("click", (t) => {
          console.log(t.target.dataset.price);
        });
      }
    </script>