Hide Ad Unit When Multiple Clicks Together
Hide Ad Unit When Multiple Clicks Together
In this tutorial, we will learn about “Hide Ad Unit When multiple Clicks Together”.
First, we make a div with the id myid. added some contents to div.id is used to differentiate of the div from others.with the used of id we can apply style on div. The borders are used to draw a line around. we used a solid border in this program. The background color is used to give color to the background.
width is used for length in X-axis direction & height is used in Y-axis direction.
padding is used to make some space between the borderline and inside contents.
onclick is an event. that is used for when the user clicks on a button or div and the action will be performed that is linked to onclick event. For example, I used it to call two functions one is to hide and another one is to show.
<div id=”myid” onclick=”hide()”>
Click Here</div>
we need to hide the div after more than 2 clicks. create CSS for this div as background color red, width & height 300px font size 50px.
1 |
<style>#myid{border: solid;background- color: red;width: 300px;height: 300px;padding: 100px;text-align: center;font- size: 50;</style> |
we create a function with the name hide which will hide the div after three clicks.name of the function is hide. The function is used to perform some task. we can show output in function and also can return value that is required.
1 |
function show(){document. getElementById("myid").
style. display= "block";} |
this function is used to show the hide div. with the click on the button.
we need to declare a variable globaly. a variable is used to keep values in a memory location. when we declare a variable that keeps the memory in ram. which have a location?
if we declare it localy than whenever we call the function that initializes that value again and again. The example is as follow.
var a=0;
after declaring global variable whenever the function is called that will increment the value.
function hide(){
a++;
then there is a if condition that will check if value is greater than 2 or not. if it is greater than it will hide the div and value less than 2 will ignore everything in if
document.getelementid is used to replace the data of the id with mentioned value.
Complete Programme to Hide Ad Unit When Click Multiple Times
1 |
<html><head> <title> homepage </title><style>#myid {border: solid;background-color: red;width: 300px;height: 300px;padding: 100px;text-align: center;font-size: 30;</style></head><body><h1>Hide code</h1><div id="myid" onclick="hide()">Click Here three times to hide div</div><button onclick="show()">Click here to show div</button><script>var a=0;function hide() {a++;if(a>2){document. getElementById("myid"). style. display= "none";a=0;}}function show(){document. getElementById("myid"). style. display= "block";}</script></body></html> |
Html: Html stands for Hypertext markup language.It is used to Show graphical iew to user.
Title: To rename the page.
H1: To give head.
Head: It is used for title and style tags.
Style: It is used to describe CSS for HTML.
Body: It is the tag which is used for main programming.
Script: It is a programming language used in html for logic.