How to get value first clicked 20฿ and change to 250฿ how to get current value i clicked-CodePudding

const prices = document.querySelectorAll('.price');
prices.forEach(price => {
  price.addEventListener('click', e => {
    prices.forEach(el => el.classList.remove('active'));
    e.target.classList.add('active');

    const currentValue = e.target.value;
  })
})

<ul >
  <li  data-value="20">20 ฿</li>
  <li  data-value="50">50 ฿</li>
  <li  data-value="100">100 ฿</li>
  <li  data-value="250">250 ฿</li>
  <ul>

My problem:

When i change value, value is store multiple in currentValue variable.
(I want to get 1 value)
please explain to me and post website for more understand.

CodePudding user response：

The attribute data-value can be found as price.dataset.value in your script:

const prices = document.querySelectorAll('.price');
prices.forEach(price => {
    price.addEventListener('click', e => {
       prices.forEach(el => el.classList.remove('active'));
       e.target.classList.add('active');

       const currentValue = e.target.dataset.value;
       console.log(currentValue)
    })
})

<ul >
  <li  data-value="20">20 ฿</li>
  <li  data-value="50">50 ฿</li>
  <li  data-value="100">100 ฿</li>
  <li  data-value="250">250 ฿</li>
<ul>

CodePudding user response：

The e.target.value is used to get input element's value.

To get an element's text value, you need to use element.textContent. If you want to get the value from data attribute, you can use element.dataset.value.

const prices = document.querySelectorAll('.price');
prices.forEach(price => {
    price.addEventListener('click', e => {
       prices.forEach(el => el.classList.remove('active'));
       e.target.classList.add('active');

       const textValue = e.target.textContent;              // get the list's text-value
       const currentValue = e.target.dataset.value   " ฿";  // get the list's data-value
       console.log(textValue, currentValue)
    })
})

<ul >
  <li  data-value="20">20 ฿</li>
  <li  data-value="50">50 ฿</li>
  <li  data-value="100">100 ฿</li>
  <li  data-value="250">250 ฿</li>
<ul>

CodePudding user response：

You can also use the element.getAttribute() method to get your value. Also, just as an aside, you can use event delegation to simplify your javascript plus you only need one event listener on the parent rather than one on each li as follows:

const prices = document.querySelectorAll('.price');
document.querySelector('.money').addEventListener('click', e => {
  prices.forEach(el => el.classList.remove('active'));
  e.target.classList.add('active');
  const currentValue = e.target.getAttribute('data-value');
  console.log(currentValue);
})

.active {
  outline: 1px solid gray;
  background-color: yellow;
}

<ul >
  <li  data-value="20">20 ฿</li>
  <li  data-value="50">50 ฿</li>
  <li  data-value="100">100 ฿</li>
  <li  data-value="250">250 ฿</li>
<ul>