從 div 中獲取 onclick 的 innerHTML 值（在 javascript 中）

Question

我正在使用 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>

Answer 1

這段代碼應該可以工作。 單擊運行代碼片段並檢查結果。

 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>

Answer 2

1. 刪除所有id="pricecad"正如多語言所寫， id必須是唯一的

2. 您正在尋找事件委托，請將您的代碼替換為：

const pricebox   = document.getElementById('pricingdata')
  ,   totalprice = document.querySelector("#totalprice")
  ;
pricebox.addEventListener('click', function (e)
  {
  if (!e.target.matches('span.display-5')) return  // ignore clicks else where
  totalprice.textContent = '$' + e.target.textContent;
  });

單擊每個.pricing-box-cad'元素

const pricebox   = document.getElementById('pricingdata')
  ,   totalprice = document.querySelector("#totalprice")
  ;
pricebox.addEventListener('click', function (e)
  {
  let pricingBox = e.target

  while (!pricingBox.matches('div.pricing-box-cad'))
    {
    if (!pricingBox.parentElement) break
    pricingBox = pricingBox.parentElement
    }

  if (!pricingBox.matches('div.pricing-box-cad')) return  // ignore clicks else where

  totalprice.textContent = '$' +  pricingBox.querySelector('span.display-5').textContent
  });

Answer 3

再次使用冒泡/遞減，此方法使用closest方法找到單擊元素的".pricing-box-cad"祖先，然后獲取帶有價格的元素。 請注意，重復的 ID 已移至類。

另請注意，如果您需要支持 IE（一開始我很抱歉！），您將需要使用 pollyfill（在上面的鏈接中提到）。

 let pricingData = document.getElementById("pricingdata"); const totalprice = document.querySelector("#totalprice"); //Set even listener on parent box pricingData.addEventListener("click", function(e) { //Find closest pricing box ancestor let priceBox = e.target.closest(".pricing-box-cad") if(priceBox) { let price = priceBox.querySelector(".pricecad").innerText; //console.log(price) totalprice.textContent = "$" + price; } //Alert if clicked outside a pricing box else {alert("clicked outside area") } });

 <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 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 pricecad">31</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 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 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 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>

現在只是為了好玩，我想看看我可以用最少的 JS 在 CSS 中做多少。 所以我想出了下面的內容。 這僅用於演示目的，實際上只是為了展示您可以使用最少的 JS 實現的目標。

 let pricingData = document.getElementById("pricingdata"); const totalprice = document.querySelector("#totalprice"); //Set even listener on parent box pricingData.addEventListener("click", function(e) { //Get value from radio button let value = this.querySelector("[name=price]:checked").value; //UPdate Attribute on price CSS will take care of the rest totalprice.dataset.total = "$" + value; });

 #pricingdata label { display:block; } #pricingdata :checked + label { background-color:#CCC; } #pricingdata input[type=radio] { display:none; } #totalprice:before { content : attr(data-total) }

 <div class="row text-center pricing-box" id="pricingdata"> <input type="radio" value="30" id="rdoPrice1" name="price"> <label for="rdoPrice1" 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 pricecad">30</span> </div> <h6 class="mt-3 interval">YEARLY</h6> </div> </div> </label> <input type="radio" value="31" id="rdoPrice2" name="price"> <label for="rdoPrice2" 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 pricecad">31</span> </div> <h6 class="mt-3 interval">YEARLY</h6> </div> </div> </label> <input type="radio" value="30" id="rdoPrice3" name="price"> <label for="rdoPrice3" 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 pricecad">30</span> </div> <h6 class="mt-3 interval">YEARLY</h6> </div> </div> </label> <input type="radio" value="30" id="rdoPrice4" name="price"> <label for="rdoPrice4" 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 pricecad">30</span> </div> <h6 class="mt-3 interval">YEARLY</h6> </div> </div> </label> <input type="radio" value="69" id="rdoPrice5" name="price" checked> <label for="rdoPrice5" 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 pricecad">69</span> </div> <h6 class="mt-3 interval">YEARLY</h6> </div> </div> </label> </div> <div class="col-7"> <div class="cad-price prd-priceval">Total Price:<strong id="totalprice" data-total="$69"></strong></div> </div>