show div box after click a button in javascript


Hello guys, Today I am going to teach you the way to display a text on a div box after click on a button. This script will work purely with Java-script. So you don't require to embed any kind of java-script library with your web application work out this tutorial.

Some Cool Javscript Tutorials:

How to Show Div Box or Text After Click on a Button:

It is very easy to work out this tutorial. In this tutorial I am going to use the below HTML code to display button and div box. So, just create a HTML page and copy and paste the below HTML code to it.
<div id="welcomeDiv"  style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />
  • On the above code, id="welcomeDiv" used to identify the div box which is in hidden mod and onclick="showDiv()" is using to send event to the function.
function showDiv() {
   document.getElementById('welcomeDiv').style.display = "block";
  • The above code is the function to display the div box. When the user click on the button, this function will trigger and show the div box to the user.
You can also change the function to hide div box from users by changing the style.display ="display" to style.display = "none". By using the real-time demo with JSFiddle, you test the script live and append to your web application.

Suggested Article for Developers:

I hope you well enjoyed this article. If you have any doubts or suggestions related to this article. Please let us know by using the comment box that given below. Thanks