Estoy tratando de mostrar un Div que contiene un elemento de botón, pero solo cuando AMBAS casillas de verificación han sido "acordadas". Intenté usar JS para verificar esto y luego configurar la visualización de estilo cuando se hace clic en cada casilla de verificación.
HTML:
<div class="agreement_box"> <input type="checkbox" id="box1" onclick="showMe('submit_btn')"> </div> <br> <div class="agreement_box"> <input type="checkbox" id="box2" onclick="showMe('submit_btn')"> </div> <div id="submit_btn" class="profileSubmit_btn" style="display:none"> <button> BUTTON </button> </div>JS:
function showMe(box) { var chbox1 = document.getElementByID("box1"); var chbox2 = document.getElementByID("box2"); var vis = "none"; if (chbox1.checked && chbox2.checked) { vis = "block"; break; } document.getElementById(box).style.display = vis; }Violín: https://jsfiddle.net/nhykqodp/2/
Soy un poco nuevo en JS y mi conocimiento de HTML tiene unos 10 años de antigüedad en este momento. Cualquier ayuda sería apreciada.
Gracias.
Si ejecuto tu código, muestra:
SyntaxError no capturado: instrucción de interrupción ilegal
Eso es porque un break solo se puede usar dentro de un bucle.
Además, tiene un error tipográfico, debería ser getElementById en lugar de getElementByID
Nota : la d no debe estar en mayúscula
break function showMe(box) { var chbox1 = document.getElementById("box1"); var chbox2 = document.getElementById("box2"); var vis = "none"; if (chbox1.checked && chbox2.checked) { vis = "block"; } document.getElementById(box).style.display = vis; } <div class="agreement_box"> <input type="checkbox" id="box1" onclick="showMe('submit_btn')"> </div> <br> <div class="agreement_box"> <input type="checkbox" id="box2" onclick="showMe('submit_btn')"> </div> <div id="submit_btn" class="profileSubmit_btn" style="display:none"> <button> BUTTON </button> </div> Usando una declaración if en línea, podemos eliminar la variable vis para que podamos modificar el style de inmediato así:
function showMe(box) { const chbox1 = document.getElementById("box1"); const chbox2 = document.getElementById("box2"); document.getElementById(box).style.display = (chbox1.checked && chbox2.checked) ? 'block' : 'none'; } function showMe(box) { const chbox1 = document.getElementById("box1"); const chbox2 = document.getElementById("box2"); document.getElementById(box).style.display = (chbox1.checked && chbox2.checked) ? 'block' : 'none'; } <div class="agreement_box"> <input type="checkbox" id="box1" onclick="showMe('submit_btn')"> </div> <br> <div class="agreement_box"> <input type="checkbox" id="box2" onclick="showMe('submit_btn')"> </div> <div id="submit_btn" class="profileSubmit_btn" style="display:none"> <button> BUTTON </button> </div>Los errores de sintaxis ya han sido señalados; para ocultar/mostrar elementos, estos ya tienen una API que se llama el.hidden . Te recomiendo que lo uses.
Aparte de eso, no debe usar controladores de eventos en línea como onclick . En su lugar, use EventTarget.addEventListener() .
También generalicé su código, de modo que cualquier cantidad de casillas de verificación pueda actuar como alternar para cualquier elemento, dado que ese elemento tiene la id que define en data-toggle en las casillas de verificación.
const checkboxes = Array.from(document.querySelectorAll('[data-toggle]')); function allChecked(toggle) { return checkboxes.filter(cb => cb.dataset.toggle === toggle).every(cb => cb.checked); } for (const checkbox of checkboxes) { checkbox.addEventListener('change', function() { document.getElementById(this.dataset.toggle).hidden = !allChecked(this.dataset.toggle); }); } <div class="agreement_box"> <input type="checkbox" data-toggle="submit_btn"> </div> <br> <div class="agreement_box"> <input type="checkbox" data-toggle="submit_btn"> </div> <div id="submit_btn" class="profileSubmit_btn" hidden> <button> BUTTON </button> </div>Pequeño error de sintaxis simplemente reemplace document.getElementByID a document.getElementById