How to capture the inner dataset attribute value through javascript click?-CodePudding

I want to capture data-name and data-price when I click, and throw the captured data into the fields in the show block respectively. But now because the price_item is clicked, it seems that only the data-name can be captured, and the internal data-price data cannot be obtained!

I want to ask how to rewrite the data to capture the data-name and data-price data at the same time? I need everyone for the help, thank you all.

let coin_total = document.querySelector('.coin_total');
let item = document.querySelectorAll('.price_item');
let price = document.querySelector('.real-price');


function showplan(e) {
  const target = e.currentTarget;
  const selectedPlan = target.dataset.plan;
  const selectedPrice = target.dataset.price;

  item.forEach(el => el.classList.remove('active'))
  coin_total.textContent = selectedPlan;
  price.textContent = selectedPrice;

  console.log(price);
}

item.forEach(el => el.addEventListener('click', showplan));

.price-content {
  display: flex;
}

.price-content .price_item {
  padding: 30px;
  border: 1px solid #222;
  border-radius: 4px;
  margin: 10px;
}

<ul >
  <li  data-plan="BASE">
    <div >
      <h2 >BASE</h2>
      <p >3,000 point</p>
    </div>
    <div >
      <h3  data-price="3000"><span >$</span>3,000</h3>
    </div>
  </li>

  <li  data-plan="Luxury">
    <div >
      <h2 >luxury</h2>
      <p >9,000 point</p>
    </div>
    <div >
      <h3  data-price="9000"><span >$</span>9,000</h3>
    </div>
  </li>
</ul>

<div >
  <p >60,000點(豪華版)</p>
  <p >$9,000</p>
</div>

CodePudding user response：

The 'data-price' attribute is in the h3 tags, which are not being read in the event listener.

Put the 'data-price' attribute in every li with class 'price_item', the same way it is already done with 'data-plan'.

CodePudding user response：

You have data-plan on the <li>, but data-price is on the <h3>.

You would have to get data-price from the <h3> directly, you can't access that from the dataset on the <li>.

CodePudding user response：

I don't see the data-name in the code, but infer from your code it should refer to the data-plan, simply use getAttribute to get the attribute

const item = document.querySelectorAll('.price_item');

function showPlan(){
  const show = 
    document.querySelectorAll('.show p');
  show[0].textContent = 
    this.getAttribute('data-plan');
  show[1].textContent = 
    this.querySelector('.price').getAttribute('data-price');
}

item.forEach(e => e.addEventListener('click', showPlan));

.price-content {
  display: flex;
}

.price-content .price_item {
  padding: 30px;
  border: 1px solid #222;
  border-radius: 4px;
  margin: 10px;
}

<ul >
  <li  data-plan="BASE">
    <div >
      <h2 >BASE</h2>
      <p >3,000 point</p>
    </div>
    <div >
      <h3  data-price="3000"><span >$</span>3,000</h3>
    </div>
  </li>

  <li  data-plan="Luxury">
    <div >
      <h2 >luxury</h2>
      <p >9,000 point</p>
    </div>
    <div >
      <h3  data-price="9000"><span >$</span>9,000</h3>
    </div>
  </li>
</ul>

<div >
  <p >60,000點(豪華版)</p>
  <p >$9,000</p>
</div>

In addition, you can set both data-plan and data-plan in the li tag.

For example, replace

<li  data-plan="BASE">

with

<li  data-plan="BASE" data-price="3000">