用JS显示隐藏的div

Question

I have done a CSS for a hidden div. I'm trying to show the div when a button is clicked, but I'm getting "null" on Mozilla debugger. Any tip to solve this? Thanks.

Sorry if the code is so bad, im just learning a little on my free time.

<script id="but1">

  function Show() {
    var ele = document.getElementById("box");
    ele.style.visibility= "visible" ;
  }
</script>

<button type="button" class="but1" id="but1" onclick="Show()">Start</button> 
<div class="box">
  <p class="clicked">Content</p>
</div>

Answer 1

As you have element with class , not id you should use document.getElementsByClassName("box")[0]; instead document.getElementById("box");

Answer 2

I have done a CSS for a hidden div .

In that case, use display:block instead of ele.style.visibility= "visible" ;

Also, box is a class so document.getElementById wont work.

var ele = document.querySelector(".box");
ele.style.display= "block" ;

Answer 3

您可以使用querySelector而不是getElementById来标识id而不是类