Making javascript work with HTML: We’ve seen throughout this mission how you can add JavaScript to your HTML web page by writing it inside the < script > tag. But now we need to learn how to make our JavaScript code run when the user clicks on an HTML element. If we want something to happen when the user clicks on a piece of text or an image on our page, we have to add JavaScript to our HTML tags. Luckily there’s an attribute that lets us do this.

The onclick attribute

It’s really easy to make a piece of JavaScript run when the user clicks on an HTML element on your page. All you need to do is include the onclick attribute (or the “onclick”) in the HTML tag you want to make interactive. Then when the user clicks on the HTML element in their browser, the JavaScript code will run. The onclick attribute is just like all the other attributes we’ve used in the missions so far. You add the attribute to the opening tag of the HTML element you want the user to click on. You then set the value of the onclick to the piece of JavaScript you want to run, using the equals sign (=) and double quotes (” “). Don’t forget the semi-colon (;). You can put any JavaScript you want inside an onclick. Let’s take a look:

[javascript] <!DOCTYPE html>
<html>
<head>
<title>What Color am I thinking about?</title>
</head>
<body>
<p onclick="alert(‘Green’);">
Click here to find out the colour I’m thinking of.
</p>
</body>
</html>[/javascript]

When the user clicks on the text between the opening and closing < p > tags, the JavaScript function in our onclick runs. An alert will pop up.

We used single quotes (‘ ‘) around the argument we passed to our alert function. This is because we had already used double quotes to set the value of the onclick attribute. Always
use single quotes inside double quotes, or your code won’t run.

Using true and false with the return statement

You can also use your onclick attribute to stop your browser following an instruction in a piece of code. To do this you use a return statement in your onclick, and set its value to “false”. Return is a reserved word in JavaScript. If you use a return statement and set it to the value “true”, your browser will keep running the code. But if you use “false” as a value in your return statement, your browser will stop running the code immediately.

RESERVED WORDS are words that cannot be used as function or variable names. This is because they are special commands that your browser understands. You don’t need to put reserved words in double quotes (“”)

The onclick attribute and hyperlinks

We can create a very useful piece of JavaScript with the onclick attribute and the value “false“. You can use the onclick and the return statement to stop a hyperlink from working when a user clicks on it. This will be very useful when we code our password later in the mission. If the user gets the password wrong, they won’t be taken to the secret web page. To do this, you first create your hyperlink in exactly the same way as we did at the start of the mission, using the anchor < a > tag and the href attribute, like this:

[javascript] <body>
<a href="mynewpage.html">
Click here to visit my new web page
</a>
</body>[/javascript]

Then you add the onclick attribute and the return statement. Set the value of the return statement to “false“, like this:

[javascript] <body>
<a href="mynewpage.html" onclick="return false;">
Click here to visit my new web page
</a>
</body>[/javascript]

Using “false“ as the value of our onclick means that nothing will happen when the user clicks on the link.

MAKING HTML CODE RUN JAVASCRIPT

Practise using the HTML onclick attribute to run a piece of JavaScript code. Knowing how to do this will mean you can make HTML elements respond to the user.

1) Open up your text-editing program. Create a new HTML file called onclick.html. Type this code into your new file:

[javascript] <!DOCTYPE html>
<html>
<head>
<title>Onclick</title>
</head>
<body>
</body>
</html>[/javascript]

2) In your < body > create a hyperlink that will take your user to Google. Use the anchor < a > tag and href attribute. Set the value to the Google URL. Your code will look like this:

[javascript] <body>
<a href="https://www.google.com">
Google
</a>
</body>[/javascript]

3) Now add your onclick attribute to your opening < a > tag. Set the value of your onclick to a JavaScript alert. Remember to use single quotes (‘ ‘) for the alert argument. Your code will look like this:

[javascript] <a href="https://www.google.com" onclick="alert(‘Redirecting to Google’);">
Google
</a>[/javascript]

4) Save your HTML file and open it in your browser. When you click on the link an alert will pop up. When you click OK, you will be taken to Google.

5) Now stop your hyperlink from taking you to Google. Use a return statement in your onclick like this:

[javascript] <a href="https://www.google.com" onclick="return false;">
Google
</a>[/javascript]

Save your file and refresh your page. When you click on the link, your page won’t connect to Google.

Related Links:

Online JavaScript Compiler. Code on the go.

Connected through code, Choose Your Platform!

About the Author: Bernard Aybout

In the land of bytes and bits, a father of three sits, With a heart for tech and coding kits, in IT he never quits. At Magna's door, he took his stance, in Canada's wide expanse, At Karmax Heavy Stamping - Cosma's dance, he gave his career a chance. With a passion deep for teaching code, to the young minds he showed, The path where digital seeds are sowed, in critical thinking mode. But alas, not all was bright and fair, at Magna's lair, oh despair, Harassment, intimidation, a chilling air, made the workplace hard to bear. Management's maze and morale's dip, made our hero's spirit flip, In a demoralizing grip, his well-being began to slip. So he bid adieu to Magna's scene, from the division not so serene, Yet in tech, his interest keen, continues to inspire and convene.