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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

My question is, how do i hide all replybox when i press this bootstrap class button(btn btn-danger) - renunta(cancel)

CodePudding user response：

Your classes/id are errorous:

• card-body is actually a class but youre using it as an id
• id reply-button never appears in your html
• id cancel-button never appears on your html
• using document.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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Please be aware that display: contents; is working draft css (see https://caniuse.com/?search=display:contents 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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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.

CodePudding user response：

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>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>