如何在 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