let btn = document.getElementById('reply-button'); let crdbody = document.getElementById('card-body'); let replybox = document.getElementById('reply-box'); let cancel = document.getElementById('btn btn-danger'); btn.onclick = function() { replybox.style.display = "contents"; } cancel.onclick = function() { crdbody.style.display = "none"; } <button class="btn" id="reply-button">Răspunde</button> <div id="reply-box" class="card" style="display: none"> <div class="card-body"> <textarea class="form-control"></textarea> <br> <div class="form-group"> <button class="btn btn-primary">Postează răspunsul</button> <button class="btn btn-danger">Renunță</button> </div> </div> </div>Mi pregunta es, ¿cómo escondo todos los cuadros de respuesta cuando presiono este botón de clase de arranque (btn btn-danger) - renunta (cancelar)
Tus clases/id son erróneos:
card-body es en realidad una clase, pero lo estás usando como una identificaciónreply-button identificación nunca aparece en su htmlcancel-button identificación nunca aparece en su htmldocument.getElementById('btn btn-danger') no funciona, necesita poner una identificación allí, no varias clases.Aquí está su código fijo:
let btn = document.getElementById('reply-button'); let crdbody = document.getElementById('card-body'); let replybox = document.getElementById('reply-box'); let cancel = document.getElementById('cancel-button'); btn.onclick = function() { replybox.style.display = "contents"; } cancel.onclick = function() { crdbody.style.display = "none"; } <div id="reply-box" class="card"> <div id="card-body"> <textarea class="form-control"></textarea> <br> <div class="form-group"> <button class="btn btn-primary" id="reply-button">Postează răspunsul</button> <button class="btn btn-danger" id="cancel-button">Renunță</button> </div> </div> </div> Tenga en cuenta que la display: contents; está trabajando en el borrador de css (consulte https://caniuse.com/?search=display%3Acontents y https://drafts.csswg.org/css-display/ ), lo que significa que aún puede estar sujeto a cambios y no es un estándar real sin embargo, por lo que no debe (todavía) confiar en esa característica en su código de producción real.
Actualice ya que no puede cambiar el HTML:
let btn = document.getElementById('reply-button'); let replybox = document.getElementById('reply-box'); let cancel = document.querySelector('.btn.btn-danger'); btn.onclick = function() { replybox.style.display = "contents"; } cancel.onclick = function() { replybox.style.display = "none"; } <button class="btn" id="reply-button">Răspunde</button> <div id="reply-box" class="card" style="display: none"> <div class="card-body"> <textarea class="form-control"></textarea> <br> <div class="form-group"> <button class="btn btn-primary">Postează răspunsul</button> <button class="btn btn-danger">Renunță</button> </div> </div> </div> Al seleccionar elementos por clases, puede usar document.querySelector (para elementos únicos) y document.querySelectorAll (para elementos múltiples).
También tenga en cuenta que eliminé la variable crdbody y cambié la secuencia de comandos para ocultar/mostrar el replybox de respuesta para que se abra/cierre correctamente varias veces.
Prueba esto. ¿Necesitas este resultado?
let btn=document.querySelector('#reply-box .btn.btn-primary'); let replybox=document.getElementById('reply-box'); let cancel=document.querySelector('#reply-box .btn.btn-danger'); btn.onclick=function(){ replybox.style.display="contents"; } cancel.onclick=function(){ replybox.style.display="none"; } btn.click(); // just for testing... it displays the reply box at first time. <div id="reply-box" class="card" style="display: none"> <div class="card-body"> <textarea class="form-control"></textarea> <br> <div class="form-group"> <button class="btn btn-primary">Postează răspunsul</button> <button class="btn btn-danger">Renunță</button> </div> </div> </div>