mercredi 21 avril 2021

Alert box displays NaN after the desired pop up

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

  1. After getting the result popup I am getting one more pop up which says Nan. How do i remove that?

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



Aucun commentaire:

Enregistrer un commentaire