JavaScript ‘Click Me’ prank for beginners
Those new to javaScript can start to get a feel for grabbing page elements and adding events by building a simple application.
The “Click Me” prank is a single button which displays on the page. When the user tries to click the button, the button moves away from the cursor.
You can view the prank here. Feel free to download the file and use it as you wish.
Let’s start with the markup and styling:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<style>
#button {
width:100px;
height:50px;
position:absolute;
top:100px;
left:100px;
}
</style>
</head>
<body>
<button id="button">Click Me!</button>
<script></script>
</body>
</html>
The above code creates a basic HTML page, ads a Click Me! button and applies some CSS styling.
Now on to the javaScript. You will put the following code between the <script> tags.
var button = document.getElementById("button");
First, grab the button by its ID using document.getElementByID. Then assign the button element to a variable named button.
var buttonWidth = button.offsetWidth; var buttonHeight = button.offsetHeight;
Next, grab the width and height of the button element using offsetWidth and offsetHeight. Set those to new variables.
var browserWidth = window.innerWidth || document.documentElement.clientWidth; var browserHeight = window.innerHeight || document.documentElement.clientHeight;
Next you need to determine the width and height of the user’s browser window. You will use the information later to randomly position the button around the page.
You start by creating a variable for both the height and width. Then grab the width of the browser window by using window.innerWidth. Because older “legacy” browsers such as IE8 do not support innerWidth, you also have to add an OR operator and use document.documentElement.clientWidth. Repeat the steps for height.
The width and height variables will be set to a number.
function move() {
button.style.left = Math.floor(Math.random()*(browserWidth-buttonWidth)) + "px";
button.style.top = Math.floor(Math.random()*(browserHeight-buttonHeight)) + "px";
}
Next, create the function that will move the button around the page.
Using Math.random(), generate a random number between 0 and 1. Then multiply that number by the width of the window (stored in the browserWidth variable). For example, if the width of the browser was 800, Math.random() may generate a value of .04328 which would multiply to 34.624. Subtract the width and height of the button from the browser measurements to be sure it never get’s positioned off the right or bottom sides of the browser window.
Math.floor is used to remove the decimals from our product, which would result in 34. Concat “px” to the end to convert the number into a string (“34px”) and set it equal to the button’s left or top properties.
if(typeof addEventListener !== "undefined") {
button.addEventListener("mouseover", move, false);
} else if (typeof attachEvent !== "undefined") {
button.attachEvent("onmouseover", move);
} else {
button.onmousover = move;
}
Finally, add an event to the page which will trigger when the user’s mouse moves over the button.
Start by checking if the user’s browser is modern (standards compliant) by checking if it supports the addEventListener method. If addEventListener does not return undefined, call that method on the button element.
Use “mouseover” as the event type for the first property, followed by our move function as the listener, followed by false for useCapture.
If addEventListener returns undefined, use the attachEvent method which is supported by older browsers. For the type property, change “mouseover” to “onmouseover”. Also, you may remove the useCapture property.
Finally, as a safety guard for browsers that don’t support attachEvent, we use a DOM level 0 event handler. Set button.onmouseover equal to the move function. This last step is likely overkill for this project, but promotes best practices.
Here is the final code:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<style>
#button {
width:100px;
height:50px;
position:absolute;
top:100px;
left:100px;
}
</style>
</head>
<body>
<button id="button">Click Me!</button>
<script>
var button = document.getElementById("button");
var browserWidth = window.innerWidth || document.documentElement.clientWidth;
var browserHeight = window.innerHeight || document.documentElement.clientHeight;
var buttonWidth = button.offsetWidth;
var buttonHeight = button.offsetHeight;
function move() {
button.style.left = Math.floor(Math.random()*(browserWidth-buttonWidth)) + "px";
button.style.top = Math.floor(Math.random()*(browserHeight-buttonHeight)) + "px";
}
if(typeof addEventListener !== "undefined") {
button.addEventListener("mouseover", move, false);
} else if (typeof attachEvent !== "undefined") {
button.attachEvent("onmouseover", move);
} else {
button.onmousover = move;
}
</script>
</body>
</html>
Leave a Reply