How to get value in bold tag using jQuery

Question

I have a table

<div class="main"> <table> <tr> <td> <b class="bold">1500></b> </td> <td> <b class="bold">2500></b> </td> <td> <b class="bold">4500></b> </td> </tr> </table> <input type="text" id="displayTotal"/> <input type="button" id="btnAdd" value="Get Total"/> </div> 

Now when I click the button, I want to add values ​​to the bold tag that has the class name bold. I tried to use

 <script> $('#btnAdd').click(function(){ var a=$("div.bold").Val(); 

I do not know what to do next. Any help plz. I want the result to be like 8500 in the text box

Answer 1

Your html is invalid. b should close. After using the iterator and using jquery text() you can get the values ​​and sum them up like this:

 $('#btnAdd').click(function() { //declare a variable to keep the values var sum = 0; //use each to iterate through b elements $("div.main table tr td b").each(function() { //sum the values sum += parseInt($(this).text(), 10); }); //change input value with the new one $("#displayTotal").val(sum); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> <table> <tr> <td> <b class="bold">1500</b> </td> <td> <b class="bold">2500</b> </td> <td> <b class="bold">4500</b> </td> </tr> </table> <input type="text" id="displayTotal" /> <input type="button" id="btnAdd" value="Get Total" /> </div> 

Answer 2

 $('#btnAdd').on('click', function () { var a = $('.main .bold').text(); }; 

Answer 3

Bold fonts are not div, but 'b's

 var a=$("b.bold").text();