文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >从div获得innerHTML值(在javascript中)

问从div获得innerHTML值(在javascript中)
EN

Stack Overflow用户
提问于 2020-09-23 01:22:05
回答 3查看 665关注 0票数 1

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

这是我迄今尝试过的代码！

​

代码语言：javascript
复制
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;
});
代码语言：javascript
复制
<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
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-09-23 01:48:20

这段代码应该能用。单击“运行代码段”并检查结果。

​

代码语言：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;
  }
}
代码语言：javascript
复制
<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>

​

票数 2
EN

Stack Overflow用户

发布于 2020-09-23 01:41:22

  1. 删除所有id="pricecad"，polyglot写道，ids必须是唯一的

  1. 您正在寻找事件委托，请将代码替换为：

代码语言：javascript
复制
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'元素

代码语言：javascript
复制
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
  });
票数 1
EN

Stack Overflow用户

发布于 2020-09-23 03:10:52

再次使用冒泡/删除，此方法使用closest查找单击的元素的".pricing-box-cad"祖先，然后使用价格获取元素。注意，重复的ID已经移到了类中。

还请注意，如果您需要支持IE (首先，我很抱歉！)您将需要使用圆柱形填充(在上面的链接中提到)。

​

代码语言：javascript
复制
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") }

});
代码语言：javascript
复制
<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>

​

现在，我只是为了好玩，我想看看我能用CSS做多少只有最小的JS。所以我想出了下面的内容。这仅仅是为了演示的目的，实际上是为了展示您可以用最小的JS实现什么。

​

代码语言：javascript
复制
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;
});
代码语言：javascript
复制
#pricingdata label  {
  display:block;
}

#pricingdata :checked + label  {
  background-color:#CCC;
}

#pricingdata input[type=radio] {
  display:none;
}

#totalprice:before {
  content : attr(data-total)
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/64019705

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档