如何使用JavaScript捕获发生点击事件时的p元素值

Question

这是我的代码。我想在单击按钮时捕获星云和价格 1.44。任何人都可以帮助我吗？网页代码           <div class="item__top">                <p> Nebula</p>                <p>                    Price<span class="big-price">1</span>.44                    <span class="text-large">/mo</span>                </p>                <p>$2.88</p>                                <button class="calculate-hosting">Get Started</button>                <p>You pay $17.28 — Renews at $33.88/year</p>            </div>JS代码var calHosting = document.querySelectorAll('.calculate-hosting');[...calHosting].forEach(cal=>{    cal.addEventListener('click',function(event){        document.getElementById('cal-container').style.display='block';    });});Note: I am dealing with mutiple buttons so thats why I sued querySelectorAll.

Answer 1

您可以使用this来引用单击的按钮，.parentElement向上爬，然后选择段落及其内部文本。可以从那里按照您喜欢的方式解析文本。

var calHosting = document.querySelectorAll('.calculate-hosting');

[...calHosting].forEach(cal => {

    cal.addEventListener('click', function (event) {

        var paragraphs = this.parentElement.querySelectorAll("p");

        var p1 = paragraphs[0].innerText;

        var p2 = paragraphs[1].innerText;

        var price = Number(p2.match(/\d+\.\d+/)[0]);

        

        console.log(p1); // Nebula

        console.log(p2); // Price1.44 /mo

        console.log(price); // 1.44

        

        // document.getElementById('cal-container').style.display = 'block';

    });

});

<div class="item__top">

    <p> Nebula</p>

    <p>

        Price<span class="big-price">1</span>.44

        <span class="text-large">/mo</span>

    </p>

    <p>$2.88</p>

    <button class="calculate-hosting">Get Started</button>

    <p>You pay $17.28 — Renews at $33.88/year</p>

</div>