Javascript 如何通过单击按钮获取div html中的文本值

我想通过单击按钮事件获取div标记之间的文本

<div class="col-lg-3 col-md-6 mb-4">
    <div class="pricing-table pricing-secondary">
        <div class="price-header">
            <h3 class="title text-white">Gold Plan</h3>
            <div class="price">
                <span class="dollar">&#8377</span> 7000
            </div>
            <span class="permonth">3 months</span>
        </div>
        <div class="price-footer">
            <a data-toggle="modal" data-target="#myModal"
                class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
                Online Appointment</a>
        </div>
    </div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
    <div class="pricing-table pricing-third">
        <div class="price-header">
            <h3 class="title text-white">Diamond Plan</h3>
            <div class="price text-primary">
                <span class="dollar">&#8377</span> 12000
            </div>
            <span class="permonth">6 Months</span>
        </div>
        <div class="price-footer">
            <a data-toggle="modal" data-target="#myModal"
                class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
                Online Appointment</a>
        </div>
    </div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
    <div class="pricing-table pricing-fourth">
        <div class="price-header">
            <h3 class="title text-white">Platinum Plan</h3>
            <div class="price text-white">
                <span class="dollar">&#8377</span> 15000
            </div>
            <span class="permonth">12 Months</span>
        </div>
        <div class="price-footer">
            <a data-toggle="modal" data-target="#myModal"
                class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
                Online Appointment</a>
        </div>
    </div>
</div>

黄金计划
₹ 7000
三个月
钻石计划
₹ 12000
6个月
白金计划
₹ 15000
12个月

我有这种类型的div，大约有三到四个，我想通过点击这个按钮来检测值

12000

和月份

6个月

---

如何实现这一点。

您可以向要提取其内容的元素添加

id

s，然后可以使用

document.getElementById（id）

获取这些元素，并使用

.innerText

提取字符串内容

然后使用

string.replace（）

可以删除任何非数值，并将货币值转换为数字

const dollarAmount=parseFloat（document.getElementById（“美元信息”）.innerText.replace（/[^0-9.]/g'））
const month=document.getElementById（“月信息”）.innerText
console.log（dollarAmount）
console.log（月）

钻石计划
�.80
6个月

试试看

---

演示-

假设您有许多价格表，您可以循环每个表，如下例所示。您可以将数据包装到某个类中，并获取该类div的文本值。单击上的按钮以获取下面示例中的值

$（文档）.ready（函数（）{
$（'.pricing table'）。每个（函数（）{
var$表=$（此）；
$table.on（'click'，'.btn primary'，function（）{
var price=$table.find（'.price'）.text（）.trim（）；
var permonth=$table.find（'.permonth'）.text（）.trim（）；
警报（“价格为“+价格+”表示“+月数”）；
});
});
});

钻石计划
₹ 12000
6个月
有很多选择可以做到这一点。下面是我的示例，其中包含代码段和代码沙盒


//jquery
const findValues=（target，value）=>target.parents（）.eq（1）.find（value）；
$（文档）.on（“单击”、“.btn”、（e）=>{
const$target=$（e.target）；
//美元是可选的
const$dollar=find值（$target，“.dollar”）；
const$value=findValue（$target，.value”）；
const$month=find值（$target，.permonth”）；
$（“#test”）.text（`${$dollar.text（）}${$value.text（）}${$month.text（）}`）；
});
////香草js
const test1=document.querySelector（“test1”）；
document.queryselectoral（“.btn”）.forEach（（btn）=>{
btn.addEventListener（“单击”，（{target}）=>{
const nodes=target.parentNode.parentNode；
const dollar1=nodes.querySelector（“.dollar”）；
const value1=nodes.querySelector（“.value”）；
const month1=nodes.querySelector（“.permonth”）；
test1.innerText=`${dollar1.textContent}${value1.textContent}${month1.textContent}`；
});
});

黄金计划
₹ 7000
三个月
钻石计划
₹ 12000
6个月
白金计划
₹ 15000
12个月
div在里面，每个按钮有一个或多个按钮和div？@始终与上图所示相同。您有这种类型的div没问题！但你们都是同一类人吗？你们想点击按钮获取价格和月数-这不像你们点击一次就获取所有月份和价格-希望这有意义吗？@Alwayshelfing但价格和月数可能会vary@AlwaysHelping看我更新了我的代码它会根据上面的代码改变吗？我也需要在按钮上点击它取决于您想要使用什么来选择您正在尝试刮取的HTML元素-您是否只想点击特定的div，在这种情况下，您可以为每个on添加一个id，如下面的答案所示？否则，如果您想使用“price”类删除所有div，可以使用
getElementsByClassName
返回该类中所有html元素的列表，然后您可以获取该类的内容。让我确切地知道您希望从问题中更新的代码中获得什么输出（以及多少输出），我将相应地更新此答案。
$（'.pricing table'）。每个（function（）{
都是无用的。jQuery已经在集合上运行，如果需要，它还提供
$（event.delegateTarget）
。
$(".price-footer .btn").on( "click", function(event) {
  const parent = $(this).parents('.pricing-table');
  
  const priceText = $('.price', parent).text().trim();
  const priceParts = priceText.split(' ');
  
  console.log(`priceText: ${priceParts[1]}`);
  // Output: "priceText: 12000"
  
  const permonthText = $('.permonth', parent).text().trim();
  console.log(`permonthText: ${permonthText}`);
  // Output: "permonthText: 6 Months"
});