当我按下引导类按钮时，我需要隐藏回复框

Question

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>

我的问题是，当我按下这个引导类按钮时如何隐藏所有回复框（btn btn-danger）-renunta（取消）

Answer 1

您的课程/ID 有误：

• card-body 实际上是一个类，但您将其用作 id
• id reply-button 永远不会出现在您的 html 中
• id cancel-button 永远不会出现在您的 html 中
• 使用 document.getElementById('btn btn-danger') 不起作用，您需要在其中放置一个 id，而不是多个类。

这是你的固定代码：

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>

请注意 display: contents; 正在工作的 CSS 草案（请参阅 https://caniuse.com/?search=display%3Acontents 和 https://drafts.csswg.org/css-display/）这意味着它仍然可能会发生变化并且还不是真正的标准，所以你不应该（仍然）依赖该功能在您的实际生产代码中。

更新，因为您无法更改 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>

当按类选择元素时，您可以使用document.querySelector（用于单个元素）和document.querySelectorAll（用于多个元素）。

另请注意，我删除了 crdbody 变量并将脚本更改为隐藏/显示 replybox，因此它可以多次正确打开/关闭。

Answer 2

试试这个。你需要这个结果吗？

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>