Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.3k views
in Technique[技术] by (71.8m points)

Dissappear content with html

I was playing with some html and thought I might come across something I can use for my website. Well, while I was playing with html, I came across hiding html content and so I thought of a code that might do it. Here is my code.

<input type = "checkbox"  id = "on"></input>
<button onclick = "myFunction()">Dissappear.</button>
<p id = "demo">Html is the best</p>
<script>
function myFunction(){
var b = document.getElementById("on").value
if(b =="on"){
document.getElementById("demo").style.visibility = "hidden"
}
}
</script>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

You are using a checkbox in a wrong way here. We must work with for checked property instead

if(b =="on"){
  document.getElementById("demo").style.visibility = "hidden"
}

b=="on" is a truthy string and is always true.

Also, best is to use display:none; instead of hidden.

document.getElementById("demo").style.display= "none";

FULL WORKING CODE: Only when the input is checked and we click on the the below div should disappear (This makes more sense in this example). Try this

<input type = "checkbox"  id = "on"></input>
<button onclick = "myFunction()">Dissappear.</button>
<p id = "demo">Html is the best</p>
<script>
function myFunction(){
   var b = document.getElementById("on");
   console.log(b);
  if(b.checked){
    document.getElementById("demo").style.display = "none";
  }
}
</script>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...