Creé un formulario y mientras las entradas que tienen el atributo requerido estén vacías, el botón permanecerá deshabilitado.
Cuando solo se completen las entradas con el atributo requerido, el botón estará habilitado.
¿Cómo hacer esto con javascript?
// select all input with Attribute Required let elReq = document.querySelectorAll('input[required="required"]'); // if elReq input is empty = .button disabled if (elReq.value == "") { document.querySelector('.button').disabled = true; // if elReq input is filled in = .button enabled } else { document.querySelector('.button').disabled = false; } .button { color: #fff; background-color: #007bff; border: none; display: inline-block; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; cursor: pointer; } .button:disabled { color: #a2a5a9; border-color: #c9ced3; background-color: #f2f2f2; cursor: text; } <form class="form" id="form"> <input type="number" id="a" class="a" placeholder="000" required> <input type="number" id="b" class="b" placeholder="0"> <input type="number" id="c" class="c" placeholder="000" required> <input type="number" id="d" class="d" placeholder="000" required> <input type="number" id="e" class="e" placeholder="0"> </form> <button type="submit" value="Ok" id="send" class="button" onclick="sum()">Ok</button>Básicamente, es una forma común. Si el usuario no rellena los campos obligatorios, no podrá acceder al siguiente paso. Por ejemplo, un formulario de inicio de sesión: si el usuario no completa las entradas de "correo electrónico" y "contraseña", no se puede hacer clic en el botón "siguiente". Es el mismo principio.
Este código debería funcionar.
Varias cosas raras que creo que deberías cambiar.
eventListener , por lo que una vez que se carga el documento, verificará si la entrada tiene valor o no (que siempre será "" )input con el atributo required , por lo que debe usar querySelectorAll en lugar de querySelector y un bucle para hacer un bucle. document.querySelectorAll('[required]').forEach(item=>{ item.addEventListener('change',check) window.addEventListener('load',check) }) function check(){ for(let i of document.querySelectorAll('[required]')){ if (!i.value) { document.querySelector('.button').disabled = true; break; } else { document.querySelector('.button').disabled = false; } } } .button { color: #fff; background-color: #007bff; border: none; display: inline-block; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; cursor: pointer; } .button:disabled { color: #a2a5a9; border-color: #c9ced3; background-color: #f2f2f2; cursor: text; } <form class="form" id="form"> <input type="number" id="a" class="a" placeholder="000" required> <input type="number" id="b" class="b" placeholder="0"> <input type="number" id="c" class="c" placeholder="000" required> <input type="number" id="d" class="d" placeholder="000" required> <input type="number" id="e" class="e" placeholder="0"> </form> <button type="submit" value="Ok" id="send" class="button">Ok</button>