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

Issue

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 class="price-content">
  <li class="price_item" data-plan="BASE">
    <div class="price_item_plan">
      <h2 class="name">BASE</h2>
      <p class="coin">3,000 point</p>
    </div>
    <div class="price_item_cost">
      <h3 class="price" data-price="3000"><span class="symbol">$</span>3,000</h3>
    </div>
  </li>

  <li class="price_item" data-plan="Luxury">
    <div class="price_item_plan">
      <h2 class="name">luxury</h2>
      <p class="coin">9,000 point</p>
    </div>
    <div class="price_item_cost">
      <h3 class="price" data-price="9000"><span class="symbol">$</span>9,000</h3>
    </div>
  </li>
</ul>

<div class="show">
  <p class="coin_total">60,000點(豪華版)</p>
  <p class="real-price">$9,000</p>
</div>

Solution

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 class="price-content">
  <li class="price_item" data-plan="BASE">
    <div class="price_item_plan">
      <h2 class="name">BASE</h2>
      <p class="coin">3,000 point</p>
    </div>
    <div class="price_item_cost">
      <h3 class="price" data-price="3000"><span class="symbol">$</span>3,000</h3>
    </div>
  </li>

  <li class="price_item" data-plan="Luxury">
    <div class="price_item_plan">
      <h2 class="name">luxury</h2>
      <p class="coin">9,000 point</p>
    </div>
    <div class="price_item_cost">
      <h3 class="price" data-price="9000"><span class="symbol">$</span>9,000</h3>
    </div>
  </li>
</ul>

<div class="show">
  <p class="coin_total">60,000點(豪華版)</p>
  <p class="real-price">$9,000</p>
</div>

You can also tweak how your dataset is designed, you can set both data-plan and data-price in the li tag.

For example, replace

<li class="price_item" data-plan="BASE">

with

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

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.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 class="price-content">
  <li class="price_item" data-plan="BASE" data-price="3000">
    <div class="price_item_plan">
      <h2 class="name">BASE</h2>
      <p class="coin">3,000 point</p>
    </div>
    <div class="price_item_cost">
      <h3 class="price"><span class="symbol">$</span>3,000</h3>
    </div>
  </li>

  <li class="price_item" data-plan="Luxury" data-price="9000">
    <div class="price_item_plan">
      <h2 class="name">luxury</h2>
      <p class="coin">9,000 point</p>
    </div>
    <div class="price_item_cost">
      <h3 class="price"><span class="symbol">$</span>9,000</h3>
    </div>
  </li>
</ul>

<div class="show">
  <p class="coin_total">60,000點(豪華版)</p>
  <p class="real-price">$9,000</p>
</div>

Or directly destructuring assignment the value from the dataset.

const {plan, price} = this.dataset;

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

function showPlan() {
  const {plan, price} = this.dataset;
  const show = document.querySelectorAll('.show p');
  show[0].textContent = plan;
  show[1].textContent = 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 class="price-content">
  <li class="price_item" data-plan="BASE" data-price="3000">
    <div class="price_item_plan">
      <h2 class="name">BASE</h2>
      <p class="coin">3,000 point</p>
    </div>
    <div class="price_item_cost">
      <h3 class="price"><span class="symbol">$</span>3,000</h3>
    </div>
  </li>

  <li class="price_item" data-plan="Luxury" data-price="9000">
    <div class="price_item_plan">
      <h2 class="name">luxury</h2>
      <p class="coin">9,000 point</p>
    </div>
    <div class="price_item_cost">
      <h3 class="price"><span class="symbol">$</span>9,000</h3>
    </div>
  </li>
</ul>

<div class="show">
  <p class="coin_total">60,000點(豪華版)</p>
  <p class="real-price">$9,000</p>
</div>

Or put the data-plan into the tag (using the name class attribute), just like designing the data-price.

<li class="price_item">
  <div class="price_item_plan">
    <h2 class="name" data-plan="BASE">BASE</h2>
    <p class="coin">3,000 point</p>
  </div>
  <div class="price_item_cost">
    <h3 class="price" data-price="3000"><span class="symbol">$</span>3,000</h3>
  </div>
</li>

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

function showPlan(){
  const getVal = (selector, name) =>
    this
      .querySelector(selector)
      .getAttribute(name);
  const show = 
    document.querySelectorAll('.show p');
  show[0].textContent = 
    getVal('.price_item_plan .name', 'data-plan');
  show[1].textContent = 
    getVal('.price_item_cost .price', '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 class="price-content">
  <li class="price_item">
    <div class="price_item_plan">
      <h2 class="name" data-plan="BASE">BASE</h2>
      <p class="coin">3,000 point</p>
    </div>
    <div class="price_item_cost">
      <h3 class="price" data-price="3000"><span class="symbol">$</span>3,000</h3>
    </div>
  </li>

  <li class="price_item">
    <div class="price_item_plan">
      <h2 class="name" data-plan="Luxury">luxury</h2>
      <p class="coin">9,000 point</p>
    </div>
    <div class="price_item_cost">
      <h3 class="price" data-price="9000"><span class="symbol">$</span>9,000</h3>
    </div>
  </li>
</ul>

<div class="show">
  <p class="coin_total">60,000點(豪華版)</p>
  <p class="real-price">$9,000</p>
</div>

Either way can be used as long as you know how and where to get the dataset value.

Answered By - Ian