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

Question

我正在探索 javascript、HTML、CSS 和引导程序中的混合代码。 我尝试通过单击按钮清除页面-> 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

正如我的评论中所述 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>

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

也许您只想显示/隐藏元素？ 然后我建议使用CSS 显示属性。

Answer 3

使用document.write('')您实际上是在删除页面上的每个 HTML 元素，因此接下来没有要显示的元素。 您应该使用另一个 function 来消除 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('') 之后显示隐藏按钮？

问题描述

3 个解决方案

解决方案1
2 2021-12-03 19:56:50

解决方案2
0 2021-12-03 20:03:13

解决方案3
0 已采纳 2021-12-03 20:08:28

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

问题描述

3 个解决方案

解决方案1 2 2021-12-03 19:56:50

解决方案2 0 2021-12-03 20:03:13

解决方案3 0 已采纳 2021-12-03 20:08:28

解决方案1
2 2021-12-03 19:56:50

解决方案2
0 2021-12-03 20:03:13

解决方案3
0 已采纳 2021-12-03 20:08:28