Alert box displays NaN after the desired pop up

Question

Afer going through all the suggestions, this is what i have come with. But if I am having something like $100 instead of 100, is there anyway i can covert it into number ?

  var selectedRows = document.getElementsByClassName('selected');
 limit = 0; //set limit

checkboxes = document.querySelectorAll('.checkboxdiv input[type="checkbox"]');
function checker(elem) {
  if (elem.checked) {
    limit++;
  } else {
    limit--;
  }

  for (i = 0; i < checkboxes.length; i++) { 

    if (limit == 2) {
      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = true;

      }

    } else {

      if (!checkboxes[i].checked) {
        checkboxes[i].disabled = false;
      }

    }
  }

}

for (i = 0; i < checkboxes.length; i++) {
  checkboxes[i].onclick = function() { 
    checker(this);
  }
}
  function inputChanged(event) {
  event.target.parentElement.parentElement.className =
    event.target.checked ? 'selected' : '';
}
function Calculate() {
  var cal = 0;
  for (var i = 0; i < selectedRows.length-1; i++) {
    cal = Number(selectedRows[i].textContent - selectedRows[i+1].textContent);
  }
  alert(Number(cal))
}

background-color: yellow;

    <table class="checkboxdiv">
        <tr>
          <td>
            <input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
          </td>
          <td>$100</td>
        </tr>
        <tr>
          <td>
            <input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
          </td>
          <td>$20</td>
        </tr>
        <tr>
          <td>
            <input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
          </td>
          <td>$40</td>
        </tr>
        <tr>
          <td>
            <input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
          </td>
          <td>$21</td>
        </tr>
        <tr>
          <td>
            <input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
          </td>
          <td>$12</td>
        </tr>
      </table>
      
      <button onclick="Calculate()">Calculate</button>

Hi I am trying to calculate the difference between two values of the checkbox and displaying the popup (alert box). I am getting 2 issues here

After getting the result popup I am getting one more pop up which says Nan. How do i remove that?
I want to limit the number of selected checkbox to 2, once 2 checkboxes are selected remaining should be disabled I have written the code to if length is greater than 2, checkbox should be disabled but that is not working.

var selectedRows = document.getElementsByClassName('selected');
  if(selectedRows.length>2){
    document.getElementById("mycheck").disabled = true; 
  }
function inputChanged(event) {

  event.target.parentElement.parentElement.className =
    event.target.checked ? 'selected' : '';
}

function Calculate() {
  for (var i = 0; i < selectedRows.length; ++i) {
    alert(selectedRows[i]?.textContent.trim() - selectedRows[i+1]?.textContent.trim());
  }
}

.selected {
  background-color: yellow;
}

<table>
  <tr>
    <td>
      <input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
    </td>
    <td>100</td>
  </tr>
  <tr>
    <td>
      <input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
    </td>
    <td>20</td>
  </tr>
  <tr>
    <td>
      <input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
    </td>
    <td>40</td>
  </tr>
  <tr>
    <td>
      <input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
    </td>
    <td>21</td>
  </tr>
  <tr>
    <td>
      <input id = "mycheck" type="checkbox" onchange="inputChanged(event)" />
    </td>
    <td>12</td>
  </tr>
</table>

<button onclick="Calculate()">Calculate</button>

alert is calling twice because it is inside of the loop. Don't call alert inside the for loop, rather save it in a variable and then call it outside of the loop. — ujjwal verma, Apr 21 '21 at 13:11
Reason for the NaN popup: You loop once too often. You are accessing not only index `i` but also `i+1`, so at the last iteration the `i+1` will point _beyond the end of the array_. You should iterate only to the semi-last entry: `for (var i = 0; i < selectedRows.length - 1; ++i)` (note the `- 1`) - this is not the overall solution but it's to explain what happened — CherryDT, Apr 21 '21 at 13:28
https://stackoverflow.com/questions/559112/how-to-convert-a-currency-string-to-a-double-with-jquery-or-javascript — epascarello, Apr 21 '21 at 17:15

Mamun · Accepted Answer · 2021-04-21T14:35:54.340

First of all the attribute id should be unique in a document, you can use class instead.

You should access the selectedRows inside the function Calculate.

Since you want to limit the number of selected checkbox to 2 your condition should be .length > 1.

You can try the following way:

function inputChanged(event) {
  //get all checked
  var mycheck = document.querySelectorAll('.mycheck:checked');
  //get all unchecked
  var mycheckNot = document.querySelectorAll('.mycheck:not(:checked)');
  if(mycheck.length > 1){
    //disabled all unchecked
    for (var i = 0; i < mycheckNot.length; i++) {
      mycheckNot[i].disabled = true; 
    }
  }
  else{
    //enable all unchecked
    for (var i = 0; i < mycheckNot.length; i++) {
      mycheckNot[i].disabled = false; 
    }
  }
  event.target.parentElement.parentElement.className =
    event.target.checked ? 'selected' : '';
}

function Calculate() {
  //get all selected
  var selectedRows = document.getElementsByClassName('selected');
  var sum = 0 ;
  for (var i = 0; i < selectedRows.length; i++) {
    //convert the value to number and sum them up
    sum += Number(selectedRows[i].textContent)
  }
  alert(sum);
}

.selected {
    background-color: yellow;
 }

<table>
  <tr>
    <td>
      <input class = "mycheck" type="checkbox" onchange="inputChanged(event)" />
    </td>
    <td>100</td>
  </tr>
  <tr>
    <td>
      <input class = "mycheck" type="checkbox" onchange="inputChanged(event)" />
    </td>
    <td>20</td>
  </tr>
  <tr>
    <td>
      <input class = "mycheck" type="checkbox" onchange="inputChanged(event)" />
    </td>
    <td>40</td>
  </tr>
  <tr>
    <td>
      <input class = "mycheck" type="checkbox" onchange="inputChanged(event)" />
    </td>
    <td>21</td>
  </tr>
  <tr>
    <td>
      <input class = "mycheck" type="checkbox" onchange="inputChanged(event)" />
    </td>
    <td>12</td>
  </tr>
</table>

<button onclick="Calculate()">Calculate</button>

Alert box displays NaN after the desired pop up

1 Answers1