我正在探索 javascript、HTML、CSS 和引導程式中的代碼混合。我試圖通過單擊按鈕清除頁面--> document.write('')，然后嘗試重新繪制另一個按鈕。請解釋我哪里出錯了，這是否是一個好的做法。對不起，如果這是愚蠢的。單擊按鈕 1 時，會發生兩件事：1）頁面被清除 2）第二個按鈕的可見性屬性通過更改其類名（呼叫新類名的樣式屬性）來更改
<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>
uj5u.com熱心網友回復：
正如我的評論中所述， 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/[email protected]/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>uj5u.com熱心網友回復：
使用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>
uj5u.com熱心網友回復：
我不確定您要通過清除整個頁面來做什么，但它可能沒有做您認為正在做的事情。
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 屬性。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/375206.html
標籤：javascript html css dom 隐