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

Posted 2023-03-05

技术标签:

【中文标题】如何在 document.write(\'\') 之后显示隐藏按钮？【英文标题】：how to display a hidden button after document.write('')?如何在 document.write('') 之后显示隐藏按钮？ 【发布时间】：2022-01-10 03:38:48 【问题描述】：

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

<style type="text/css">
.bnvisibility:hidden;
.btnvisibility: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>

【问题讨论】：

页面加载后不要使用 document.write。您正在删除内容，然后尝试选择不再存在的按钮。 “如果这是一个好习惯”它不是您使用引导程序，因此使用类来显示和隐藏元素。 document.getElementById('one').classList.add('d-none'); document.getElementById('two').classList.remove('d-none'); 说到不好的做法：像onclick 这样的内联事件处理程序是not recommended。它们是一种obsolete, hard-to-maintain and unintuitive 注册事件的方式。总是use addEventListener。不鼓励使用 type 属性。不要设置className，而是使用classList API。不管你在看哪个 JS 教程，都远远有better ones。 【参考方案1】：

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

您需要使用 JavaScript 隐藏元素。您可以通过设置 display 属性轻松做到这一点。

由于您使用的是引导程序，因此您应该切换它们的类。切换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>

引导程序 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>

【讨论】：

谢谢您，先生。我了解到 d-none 属于 Bootstrap5 版本，而我目前正在学习第 3 版以加强我的基础知识。当我升级自己时，我一定会尝试这个。所以在 bootstrap 3 中是 hidden【参考方案2】：

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

<style type="text/css">
    .bnvisibility:hidden;
    .btnvisibility: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>

【讨论】：

【参考方案3】：

我不确定您通过清除整个页面来尝试做什么，但它可能没有按照您的想法执行。

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

也许您只是想显示/隐藏元素？那么我建议使用CSS display property。

【讨论】：

是的，我试图隐藏元素并感谢您的建议。

以上是关于如何在 document.write('') 之后显示隐藏按钮？的主要内容，如果未能解决你的问题，请参考以下文章

document.write 向文档中写内容，包括文本脚本元素之类的，但是它在什么时候执行不会覆盖当前页面内容尼？

如何让使用 document.write() 创建的 JavaScript 执行？

Redux 在 document.open() 之后没有注册操作

document.write 有时有效，有时无效

如何在不使用 $_SESSION["name"] = "<script>document.write(name)</script>";

document.write