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>My question is, how do i hide all replybox when i press this bootstrap class button(btn btn-danger) - renunta(cancel)
Your classes/id are errorous:
card-body is actually a class but youre using it as an idreply-button never appears in your htmlcancel-button never appears on your htmldocument.getElementById('btn btn-danger') doesnt work you need to put an id in there, not multiple classes.Heres your fixed code:
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>Please be aware that display: contents; is working draft css (see https://caniuse.com/?search=display%3Acontents and https://drafts.csswg.org/css-display/) which means it still may be subject to change and isnt a real standard yet, so you shouldnt (yet) rely on that feature in your actual production code.
Update since you cant change the 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>When selecting elements by classes you can use document.querySelector (for single elements) and document.querySelectorAll (for multiple elements).
Also note that i removed the crdbody variable and changed the script to hide/show the replybox so it properly opens/closes multiple times.
Try this. You need this result?
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>