如何在 document.write('') 之后显示隐藏按钮？

Question

我正在探索 javascript、HTML、CSS 和 bootstrap 中的代码混合。我试图通过单击按钮清除页面 --> document.write('')，然后尝试重新绘制另一个按钮。请解释我哪里出错了，这是否是一种好的做法。对不起，如果这很愚蠢。单击第一个按钮时，会发生两件事：1) 页面被清除 2) 第二个按钮的可见性属性通过更改其 class 名称（调用新 class 名称的样式属性)

<style type="text/css">
.bn{visibility:hidden;}
.btn{visibility:visible;}
</style>
<script type="text/javascript">
function newpg(){
            document.write('');
            document.getElementById('two').className="btn";}
</script>
</head><body>
<div class="container">
<div class="row">
<div class="col-md-6">    <!--some content-->
<button id="one" onclick="newpg()">CLEAR &SHOW THE HIDDEN BUTTON</button>
<button class="bn" id="two">I'M HERE</button>
</div></div></div>   <!--bootstrap code inclusion-->
</body></html>

Answer 1

如我评论中所述显示 none 删除了页面的所有内容。然后您尝试找到您刚刚删除的按钮。这是行不通的。

您需要使用 JavaScript 隐藏元素。您可以通过设置显示属性.

轻松做到这一点

既然您正在使用 bootstrap，您应该切换他们的类。您可以切换 d-none 或 invisible

const btn1 = document.getElementById('one');
const btn2 = document.getElementById('two');
function newpg(evt) {
  evt.preventDefault();
  btn1.classList.add('d-none');
  btn2.classList.remove('d-none');
}
btn1.addEventListener("click", newpg);

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <!--some content-->
      <button id="one">CLEAR &SHOW THE HIDDEN BUTTON</button>
      <button class="d-none" id="two">I'M HERE</button>
    </div>
  </div>
</div>

Bootstrap 3

const btn1 = document.getElementById('one');
const btn2 = document.getElementById('two');
function newpg(evt) {
  evt.preventDefault();
  btn1.classList.add('hidden');
  btn2.classList.remove('hidden');
}
btn1.addEventListener("click", newpg);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <!--some content-->
      <button id="one">CLEAR &SHOW THE HIDDEN BUTTON</button>
      <button class="hidden" id="two">I'M HERE</button>
    </div>
  </div>
</div>

Answer 2

我不确定您要通过清除整个页面来做什么，但它可能没有按照您认为的那样进行。

document.write(''); // this indeed clear the whole HTML page
document.getElementById('two') // #two doesn't exist anymore since the page is now blank

也许你只是想要display/hide元素？然后我建议使用 CSS display property.

Answer 3

使用 document.write('') 实际上是在删除页面上的每个 HTML 元素，因此接下来不会显示任何元素。您应该使用另一个函数来删除 ID 为 one 的按钮，而不是删除所有内容。我建议 document.getElementById('one').style.display="none"。所以代码应该是这样的：

<style type="text/css">
    .bn{visibility:hidden;}
    .btn{visibility:visible;}
</style>
<script type="text/javascript">
    function newpg() {
            document.getElementById('one').style.display="none";
            document.getElementById('two').className="btn";
    }
</script>
</head>
<body>
    <div class="container">
    <div class="row">
    <div class="col-md-6">    <!--some content-->
        <button id="one" onclick="newpg()">
            CLEAR &SHOW THE HIDDEN BUTTON
        </button>
        <button class="bn" id="two">I'M HERE</button>
    </div></div></div>   <!--bootstrap code inclusion-->
</body>

如何在 document.write('') 之后显示隐藏按钮？

how to display a hidden button after document.write('')?

html

javascript

css

hidden

dom