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

Question

I want to get the text between the div tag by clicking on the button event

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

I have this type of divs its around three or four I want to detect the value 12000 and the month 6 Months by clicking on this button

How can I achieve that.

Answer 1

Try

$(".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"
});

Demo - https://codepen.io/vyspiansky/pen/MWybEEr

Answer 2

You can add id s to the elements you want to extract the contents of, then you can use document.getElementById(id) to get those elements, and use .innerText to extract the string contents.

Then with a string.replace() you can remove any non-numerical values, and convert the monetary value into a number.

 const dollarAmount = parseFloat(document.getElementById("dollar-info").innerText.replace(/[^0-9.]/g, '')) const month = document.getElementById("month-info").innerText console.log(dollarAmount) console.log(month)

 <div class="price-header"> <h3 class="title text-white">Diamond Plan</h3> <div id="dollar-info" class="price text-primary"> <span class="dollar">&#8377</span>12000.80 </div> <span id="month-info" class="permonth">6 Months</span> </div>

Answer 3

Assuming you have many price tables you can loop each table as below example. You can wrap you data in a certain class and get the text value of that class div. Click the button on the to get the value in the example below

 $(document).ready(function(){ $('.pricing-table').each(function(){ var $table = $(this); $table.on('click', '.btn-primary', function(){ var price = $table.find('.price').text().trim(); var permonth = $table.find('.permonth').text().trim(); alert("price is " + price + " for " + permonth); }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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>

Answer 4

There are so many options to do this. Here is my example with the snippet and code sandbox.

 // jquery const findValues = (target, value) => target.parents().eq(1).find(value); $(document).on("click", ".btn", (e) => { const $target = $(e.target); // dollar is optional const $dollar = findValues($target, ".dollar"); const $value = findValues($target, ".value"); const $month = findValues($target, ".permonth"); $("#test").text(`${$dollar.text()} ${$value.text()} ${$month.text()}`); }); // // vanilla js const test1 = document.querySelector("#test1"); document.querySelectorAll(".btn").forEach((btn) => { btn.addEventListener("click", ({ 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}`; }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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> <span class="value">7000</span> </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> <span class="value">12000</span> </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> <span class="value">15000</span> </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> <div id="test"></div> <div id="test1"></div>

https://codesandbox.io/s/eager-voice-2w640?file=/src/index.js