<article id="mission"> <img src="https://blog.kakaocdn.net/dn/TfNOJ/btqNXGzXt1z/1Zlb8W1gitIt6WOPWS7z3k/img.gif" width="100%" /> </article> <article id="container"> <button></button> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> </article> <script src="./main.js"></script> let inputlist = document.querySelectorAll('input'); let button = document.querySelector('button'); let save = 0; let num = 0; button.addEventListener('click',()=>{ for(let i = 0; i< 4; i++){ inputlist[(i+save)%14].checked = true; } num++; if(save-1 != -1){ if(inputlist[(save-1)%14].checked == true){ inputlist[(save-1)%14].checked =false; } } save++; });Cuando ejecuto el código, no funciona más de 7-8 clics. Cuando ingresa el enlace en el cuerpo, el primer elemento de entrada debe comportarse como la imagen que aparece.
Pero aparece el error TypeError: no se pueden establecer propiedades de indefinido (configuración 'marcada') y ya no funciona.
¿Por qué?
Tiene 13 entradas, por lo que debería ser mod 13, no 14. Verifique el fragmento a continuación
let inputlist = document.querySelectorAll('input'); let button = document.querySelector('button'); let save = 0; let num = 0; button.addEventListener('click',()=>{ for(let i = 0; i < 4; i++){ inputlist[(i + save) % 13].checked = true; } num++; if(save - 1 !== -1){ if(inputlist[(save - 1) % 13].checked === true){ inputlist[(save - 1) % 13].checked = false; } } save++; }); <article id="mission"> <img src="https://blog.kakaocdn.net/dn/TfNOJ/btqNXGzXt1z/1Zlb8W1gitIt6WOPWS7z3k/img.gif" width="100%" /> </article> <article id="container"> <button>Move</button> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> </article>Mirando su código, está usando %14, pero solo tiene 12 elementos de entrada en la página. Cuando el código se ejecuta a través del bucle, se queda sin elementos. La solución es cambiar su %14 a %12 o agregar dos elementos de entrada adicionales.
La otra opción si va a agregar casillas de verificación sería usar %inputlist.length. Esto evitaría tener que contar cuántos elementos de entrada hay en su archivo html.