Question 45630 in CSS Question posted in
Some basic documentation can be found here.

How to get value first clicked 20฿ and change to 250฿ how to get current value i clicked – CSS

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 class="money">
  <li class="price" data-value="20">20 ฿</li>
  <li class="price" data-value="50">50 ฿</li>
  <li class="price" data-value="100">100 ฿</li>
  <li class="price" 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.
Tags:

3

Answers


  1. 0

    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 class="money">
  <li class="price" data-value="20">20 ฿</li>
  <li class="price" data-value="50">50 ฿</li>
  <li class="price" data-value="100">100 ฿</li>
  <li class="price" data-value="250">250 ฿</li>
<ul>
    Login or Signup to reply.
  2. 0

    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 class="money">
  <li class="price one" data-value="20">20 ฿</li>
  <li class="price" data-value="50">50 ฿</li>
  <li class="price" data-value="100">100 ฿</li>
  <li class="price" data-value="250">250 ฿</li>
<ul>
    Login or Signup to reply.
  3. 0

    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 class="money">
  <li class="price" data-value="20">20 ฿</li>
  <li class="price" data-value="50">50 ฿</li>
  <li class="price" data-value="100">100 ฿</li>
  <li class="price" data-value="250">250 ฿</li>
<ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search