Now that we’ve gone through some examples of JavaScript let’s add a few features to our site, for example, to see what’s possible. In this section, we will add an additional image to our site using some features of the DOM API, using JavaScript to switch between the two when the image is clicked.
1. First, find another image that you want to add to your site. Make sure it is the same size as the first image, or as close as possible.
2. Save this image to your images directory.
3. Rename this image to “photo2.png” (without the quotes).
4. Go to the main.js file, and enter the following JavaScript. (If “hello world” is still there, delete it.)
var myImage = document.querySelector (‘img’);
myImage.onclick = function () {
var mySrc = myImage.getAttribute (‘src’);
if (mySrc === ‘images / photo1.png’) {
myImage.setAttribute (‘src’, ‘images / photo2.png’);
} else {
myImage.setAttribute (‘src’, ‘images / photo1.png’);
}
}
5. Save all files and upload the index.html file to your browser. Now when you click on the image, it should change to the other one!
You saved a reference to your <img> element in the myImage variable. Next, you make the property of the onclick handler event of this variable equal to an unnamed function (an “anonymous” function).
Now, whenever this event is clicked:
– Take the value of the srcal attribute of the image.
– Use a condition to check if the src value is equal to the path to the original image:
1. If it is, change the src value with the path to the second image, forcing the other image to be loaded inside the <img> element.
2. If it is not (which means that it has already changed), the src value changes back to the original image path, in the original state.
Add a custom greeting
You will then add a new piece of code, changing the page title into a custom greeting when a user first navigates the site. This welcome message will persist if the user leaves the site and comes back later – you will save it using the Web Storage API.
You will also include an option to change the user and, therefore, the welcome message whenever needed.
1. In index.html, add the following line just before the <script> element:
<button> Change user </button>
2. In main.js, add the following code at the bottom of the file, exactly as it is written – this references the new button and title, storing them inside the variables:
var myButton = document.querySelector (‘button’);
var myHeading = document.querySelector (‘h1’);
3. Now add the following function to set the custom greeting – this will do nothing for now, but you will resolve this soon:
function setUserName () {
var myName = prompt (‘Please enter your name.’);
localStorage.setItem (‘name’, myName);
myHeading.textContent = ‘Internet is cool,’ + myName;
}
This function contains a prompt () function, which brings up a dialog box, a bit like alert (). However, prompt () asks the user to enter certain data, saving it in a variable after the user clicks OK. In this case, ask the user to enter their name.
Next, you call an API called localStorage, which allows you to store data in your browser and use it later. You use the setItem () function of localStorage to create and store a data element called ‘name’, setting the value to the myName variable that contains the data entered by the user. Finally, set the text’s ContentContent to a string, plus the user’s stored name.
4. Then add this block if … else – you could call it initialization code because it structures the application when it is first loaded:
if (! localStorage.getItem (‘name’)) {
setUserName ();
} else {
var storedName = localStorage.getItem (‘name’);
myHeading.textContent = ‘Internet is cool,’ + storedName;
}
This block first uses the negation operator (NOT logical, represented by!) To check if the name exists. If it does not exist, the setUserName () function is executed to create it. If it exists (if the user has set it during a previous visit), we retrieve the stored name using the gadget () and set the textContent of the title to a string, plus the user name, as we did inside the setUserName ().
5. Finally put the onclick handler event below on the button. When clicked, theUserName () function runs. This allows the user to set a new name, when he wants, by pressing the button:
myButton.onclick = function () {
setUserName ();
}
Now, when you first visit the site, it will ask for your username, then display a custom message. You can change the name at any time by pressing the button. As an added bonus, because the name is stored in localStorage, it stays saved after closing the site, keeping the custom message there when you open the site next time.