从div（在javascript中）单击获取innerHTML值

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

这是迄今为止我尝试过的代码

让pricebox=document.getElementById'pricingdata'； const totalprice=document.queryselect或totalprice； pricebox.addEventListener'click'，函数E{ 让mainprice=document.getElementByIdpricecad.innerHTML； console.logmainprice； totalprice.innerHTML='$'+mainprice； }; 数据1 $30 每年的 数据2 $30 每年的 数据3 $30 每年的 数据4 $30 每年的 全部的 $69 每年的 总价:$30 删除所有id=pricecad正如polyglot所写，id必须是唯一的

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

const pricebox=document.getElementById'pricingdata' ，totalprice=document.queryselect或totalprice ; pricebox.addEventListener'click'，函数e { 如果！e.target.matches'span.display-5'返回//忽略单击其他位置 totalprice.textContent='$'+e.target.textContent； }; 如需了解更多信息，请单击每个定价框cad元素

const pricebox=document.getElementById'pricingdata' ，totalprice=document.queryselect或totalprice ; pricebox.addEventListener'click'，函数e { 设pricingBox=e.target while！pricingBox.matches'div.pricing-box-cad' { if！pricingBox.parentElement中断 pricingBox=pricingBox.parentElement } 如果！pricingBox.matches'div.pricing-box-cad'返回//忽略单击其他位置 totalprice.textContent='$'+pricingBox.querySelector'span.display-5'.textContent }; 删除所有id=pricecad正如polyglot所写，id必须是唯一的

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

const pricebox=document.getElementById'pricingdata' ，totalprice=document.queryselect或totalprice ; pricebox.addEventListener'click'，函数e { 如果！e.target.matches'span.display-5'返回//忽略单击其他位置 totalprice.textContent='$'+e.target.textContent； }; 如需了解更多信息，请单击每个定价框cad元素

const pricebox=document.getElementById'pricingdata' ，totalprice=document.queryselect或totalprice ; pricebox.addEventListener'click'，函数e { 设pricingBox=e.target while！pricingBox.matches'div.pricing-box-cad' { if！pricingBox.parentElement中断 pricingBox=pricingBox.parentElement } 如果！pricingBox.matches'div.pricing-box-cad'返回//忽略单击其他位置 totalprice.textContent='$'+pricingBox.querySelector'span.display-5'.textContent };

---

这个代码应该可以工作。单击RunCodeSnippet并检查结果

const totalprice=document.queryselect或totalprice； const pricebox=document.queryselectoral'.pricing box cad'； 对于var i=0；i.长度；i++{ pricebox[i].onclick=e=>{ const mainprice=e.currentTarget.querySelector'.pricecad'.innerText； totalprice.innerText='$'+mainprice； } } 数据1 $30 每年的 数据2 $30 每年的 数据3 $30 每年的 数据4 $30 每年的 全部的 $69 每年的 总价:$30

---

这个代码应该可以工作。单击RunCodeSnippet并检查结果

const totalprice=document.queryselect或totalprice； const pricebox=document.queryselectoral'.pricing box cad'； 对于var i=0；i.长度；i++{ pricebox[i].onclick=e=>{ const mainprice=e.currentTarget.querySelector'.pricecad'.innerText； totalprice.innerText='$'+mainprice； } } 数据1 $30 每年的 数据2 $30 每年的 数据3 $30 每年的 数据4 $30 每年的 全部的 $69 每年的 总价:$30

---

再次使用冒泡/删除，此方法用于查找所单击元素的.pricing框，然后获取具有价格的元素。注意，重复的ID已移动到类中

另外请注意，如果你需要支持IE作为一个开始，我很抱歉！您需要使用上面链接中提到的pollyfill

让pricingData=document.getElementByIdpricingdata； const totalprice=document.queryselect或totalprice； //在父框上设置偶数侦听器 pricingData.addEventListenerclick，函数E{ //查找最近的定价框 让priceBox=e.target.closest.pricing-box-cad ifpriceBox{ 让price=priceBox.querySelector.pricecad.innerText； //控制台，logprice totalprice.textContent=$+价格； } //在定价框外单击时发出警报 else{alertclicked Out area} }; 数据1 $30 每年的 数据2 $31 每年的 数据3 $30 每年的 数据4 $30 每年的 全部的 $69 每年的 总价:$30

---

再次使用冒泡/删除，此方法用于查找所单击元素的.pricing框，然后获取具有价格的元素。注意，重复的ID已移动到类中

另外请注意，如果你需要支持IE作为一个开始，我很抱歉！您需要使用上面链接中提到的pollyfill

让pricingData=document.getElementByIdpricingdata； const totalprice=document.queryselect或totalprice； //在父框上设置偶数侦听器 pricingData.addEventListenerclick，函数E{ //查找最近的定价框 让priceBox=e.target.closest.pricing-box-cad ifpriceBox{ 让price=priceBox.querySelector.pricecad.innerText； //控制台，logprice totalprice.textContent=$+价格； } //在定价框外单击时发出警报 else{alertclicked Out area} }; 数据1 $30 每年的 数据2 $31 每年的 数据3 $30 每年的 数据4 $30 每年的 全部的 $69 每年的 总价:$30

---

---

显示此页面的html部分…请更具体。你也可以分享你的html结构吗？添加你的html…@MisterJojo请检查更新的question@polyglot请检查更新后的问题显示此问题的html部分…请更具体。你也可以分享你的html结构吗？添加你的html…@MisterJojo请检查更新的question@polyglot请检查更新的问题它不工作，未捕获类型错误：无法读取Null的属性“innerText”。您应该更新html和js以使其工作。将我的代码复制到one和testpss：代码运行良好，但是，当单击任何div.my bad时，它会抛出一个错误。请用e.currentTarget替换e.target。我更新了代码。它不工作，未捕获类型错误：无法读取Null的属性“innerText”。您应该同时更新html和js以使其工作。将我的代码复制到one和testpss：代码运行良好，但是，当单击任何div.my bad时，它会抛出一个错误。请用e.currentTarget替换e.target。我更新了代码。工作正常，但单击主div时它不会更新价格，如果我单击价格，它会更新值，但单击div时它会更改值。工作正常，但单击主div时它不会更新价格，如果我单击价格，它会更新值，但是当我们点击div时，它应该会改变值