How to get a value within a bold tag using Jquery

Question

I am having 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 on button click I want to add the values within bold tag having class name bold. I tried using

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

I don't know what to do further. Anyone plz help out. I want the result as 8500 within textbox

Answer 1

Your html is not valid. b has to close. After you can use an iterator and using jquery text() you can get the values and sum them like:

$('#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>