Dissappear content with html

Question

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>

Answer 1

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>