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

Question

Here is my code. I want to capture Nebula and Price 1.44 when I click on button. Can anyone help me please.

Html code

           <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 code

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

You can use this to refer to the button that was clicked, .parentElement to climb up, and then select paragraphs and their inner text. The text can be parsed however you like from there.

 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>