Requisitos: cuando se hace clic en más de un botón, los usuarios podrán hacer clic en "botón de continuar".
Situación actual: Estoy haciendo una página web de cine. Los usuarios podrán elegir sus asientos preferidos. Cuando se elija el asiento, podrán hacer clic en el botón "Continuar" para pagar. Sin embargo, tengo dificultades para implementar esta función. Sé que necesitaba usar la función de visibilidad oculta.
El siguiente es mi código:
var buttons = document.getElementsByClassName("button"); var count = 0; var disp = document.getElementById("display"); for (let i = 0, l = buttons.length; i < l; i++) { buttons[i].addEventListener('click', function() { buttons[i].classList.toggle('active'); if (this.classList.contains("active")) { count++; if (this.classList.contains("active") > 1) { function proceedButton() { document.getElementById("pButton").style.display = "visible"; } } else { document.getElementById("pButton").style.display = "block"; } } else { count--; } disp.innerHTML = count; }) } function proceedButton() { var x = document.getElementById("payment-section"); if (x.style.display === "none") { x.style.display = "block"; } } .button { background-color: #423F3E; height: 30px; width: 30px; margin: 5px; border-radius: 10px; border: none; float: left; } .button.active { background-color: #F7EA00 !important; } <div class="seats-layout"> <div class="row"> <input type="button" id="button1" class="button" /> <input type="button" id="button2" class="button" /> <input type="button" id="button3" class="button" /> </div> <div class="row"> <input type="button" id="button1" class="button" /> <input type="button" id="button2" class="button" /> <input type="button" id="button3" class="button" /> </div> </div> <p> Button Clicked <span id="display">0</span> Times</p> <input type="submit" value="Proceed" onclick="proceedButton()" id="pButton" class="proceed-button" /> ``` <div id="payment-section" style="display: none"> <h1>Payment</h1> </div> ```use document.querySelectorAll para devolver todos los elementos del documento que coincidan con un selector CSS específico, como un objeto NodeList estático.
function proceedButton() { var x = document.getElementById("payment-section"); var item_click = document.querySelectorAll('.active').length; if (item_click>1) { x.style.display = "block"; }else{ x.style.display = "none"; } }