Tengo una tabla con dos columnas: valores y casillas de verificación. Quiero identificar el valor más pequeño con una casilla marcada. Adapté la configuración de esta pregunta , pero cambié la forma en que identifico las casillas de verificación de document.getElementsByTagName('input') a querySelectorAll(".myCheckbox") . La forma inicial se convirtió en un problema cuando agregué un campo de entrada adicional (por eso lo incluí a continuación)
Sin embargo, la función arroja Uncaught TypeError: Cannot read properties of undefined (reading 'type') .
¿Qué está yendo mal?
function smallestWeight() { let values = []; const ele = document.querySelectorAll(".myCheckbox"); let table = document.getElementById("myTable"); let trs = table.getElementsByTagName("tr"); for (i = 0, len = trs.length; i < len; i++) { if (ele[i].type == 'checkbox' && ele[i].checked == true) { values.push(parseFloat(trs[i].cells[0].innerHTML)); } } } const btn = document.getElementById("click"); btn.addEventListener("click", function() { smallestWeight(); }) <table id="myTable"> <thead> <tr> <th>value</th> <th>include</th> </tr> </thead> <tbody> <tr> <td>1.1</td> <td><input type="checkbox" class="myCheckbox" id="include" value="include" checked></td> </tr> <tr> <td>2.2</td> <td><input type="checkbox" class="myCheckbox" id="include" value="include" checked></td> </tr> <tr> <td>3.3</td> <td><input type="checkbox" class="myCheckbox" id="include" value="include" checked></td> </tr> <tr> <td>4.4</td> <td><input type="checkbox" class="myCheckbox" id="include" value="include" checked></td> </tr> </tbody> </table> <button id="click">Click</button><br> <input type="number">Su código mira todas las filas de la tabla. No tomas en cuenta que la primera fila de la tabla es la cabeza. Entonces, las filas de su tabla son una más grande que las casillas de verificación.
const trs = table.querySelectorAll("tbody tr");