时间戳

首页 > 解决方案 > 从 div 获取 innerHTML 值 onclick（在 javascript 中）

javascript - 从 div 获取 innerHTML 值 onclick（在 javascript 中）

问题描述

我正在使用 JavaScript 根据所选 div 更改 div 的价格值，价格已经在 div 中定义，如果我单击任何 div 它也应该更新另一个 div 中的值。到目前为止，我尝试了下面的代码，但它不起作用，它只改变了第一个 div 的值。如果我单击另一个 div，它会重复相同的价格值。

这是我到目前为止尝试过的代码！

let pricebox = document.getElementById('pricingdata');
const totalprice = document.querySelector("#totalprice");
pricebox.addEventListener('click', function(e) {
  let mainprice = document.getElementById("pricecad").innerHTML;
  console.log(mainprice);
  totalprice.innerHTML = '$' + mainprice;
});
<div class="row text-center pricing-box" id="pricingdata">
  <div class="col mx-auto pricing-box-cad align-self-center">
    <div class="card mb-4">
      <div class="card-body p-3 text-center">
        <h5 class="prdname">Data1</h5>
        <div class="mt-3 value-price">
          <sup>$</sup><span class="display-5" id="pricecad">30</span>
        </div>
        <h6 class="mt-3 interval">YEARLY</h6>
      </div>
    </div>
  </div>
  <div class="col mx-auto pricing-box-cad align-self-center">
    <div class="card active-plan mb-4">
      <div class="card-body p-3 text-center">
        <h5 class="prdname">Data2</h5>
        <div class="mt-3 value-price">
          <sup>$</sup><span class="display-5" id="pricecad">30</span>
        </div>
        <h6 class="mt-3 interval">YEARLY</h6>
      </div>
    </div>
  </div>
  <div class="col mx-auto pricing-box-cad align-self-center">
    <div class="card mb-4">
      <div class="card-body p-3 text-center">
        <h5 class="prdname">Data3</h5>
        <div class="mt-3 value-price">
          <sup>$</sup><span class="display-5" id="pricecad">30</span>
        </div>
        <h6 class="mt-3 interval">YEARLY</h6>
      </div>
    </div>
  </div>
  <div class="col mx-auto pricing-box-cad align-self-center">
    <div class="card mb-4">
      <div class="card-body p-3 text-center">
        <h5 class="prdname">Data4</h5>
        <div class="mt-3 value-price">
          <sup>$</sup><span class="display-5" id="pricecad">30</span>
        </div>
        <h6 class="mt-3 interval">YEARLY</h6>
      </div>
    </div>
  </div>
  <div class="col mx-auto pricing-box-cad align-self-center">
    <div class="card mb-4">
      <div class="card-body p-3 text-center">
        <h5 class="prdname red-tooltip">All</h5>
        <div class="mt-3 value-price">
          <sup>$</sup><span class="display-5" id="pricecad">69</span>
        </div>
        <h6 class="mt-3 interval">YEARLY</h6>
      </div>
    </div>
  </div>
</div>

<div class="col-7">
  <div class="cad-price prd-priceval">Total Price:<strong id="totalprice">$30</strong></div>
</div>

标签： javascript

解决方案

这段代码应该可以工作。单击运行代码片段并检查结果。

const totalprice = document.querySelector("#totalprice");
const priceboxes = document.querySelectorAll('.pricing-box-cad');
for (var i = 0; i < priceboxes.length; i++) {
  priceboxes[i].onclick = (e) => {
    const mainprice = e.currentTarget.querySelector('.pricecad').innerText;
    totalprice.innerText = '$' + mainprice;
  }
}
<div class="row text-center pricing-box">
      <div class="col mx-auto pricing-box-cad align-self-center">
        <div class="card mb-4">
          <div class="card-body p-3 text-center">
            <h5 class="prdname">Data1</h5>
            <div class="mt-3 value-price">
            <span>$</span><span class="display-5 pricecad">30</span>
            </div>
            <h6 class="mt-3 interval">YEARLY</h6>
          </div>
        </div>
      </div>
      <div class="col mx-auto pricing-box-cad align-self-center">
        <div class="card active-plan mb-4">
          <div class="card-body p-3 text-center">
            <h5 class="prdname">Data2</h5>
            <div class="mt-3 value-price">
            <span>$</span><span class="display-5 pricecad">30</span>
            </div>
            <h6 class="mt-3 interval">YEARLY</h6>
          </div>
        </div>
      </div>
      <div class="col mx-auto pricing-box-cad align-self-center">
        <div class="card mb-4">
          <div class="card-body p-3 text-center">
            <h5 class="prdname">Data3</h5>
            <div class="mt-3 value-price">
            <span>$</span><span class="display-5 pricecad">30</span>
            </div>
            <h6 class="mt-3 interval">YEARLY</h6>
          </div>
        </div>
      </div>
      <div class="col mx-auto pricing-box-cad align-self-center">
        <div class="card mb-4">
          <div class="card-body p-3 text-center">
            <h5 class="prdname">Data4</h5>
            <div class="mt-3 value-price">
            <span>$</span><span class="display-5 pricecad">30</span>
            </div>
            <h6 class="mt-3 interval">YEARLY</h6>
          </div>
        </div>
      </div>
      <div class="col mx-auto pricing-box-cad align-self-center">
        <div class="card mb-4">
          <div class="card-body p-3 text-center">
            <h5 class="prdname red-tooltip">All</h5>
            <div class="mt-3 value-price">
            <span>$</span><span class="display-5 pricecad">69</span>
            </div>
            <h6 class="mt-3 interval">YEARLY</h6>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-7">
                  <div class="cad-price prd-priceval">Total Price:<strong id="totalprice">$30</strong></div>
              </div>

推荐阅读