Creating Dynamic Content with JavaScript

Requirements:

Basic knowledge of HTML5 and CSS3.

Some exposure to JavaScript is recommended but not required.

 Introduction

This tutorial will demonstrate how to create dynamic content with JavaScript. We will be creating a small container with three links below it. The information within the container will update accordingly depending on which link is clicked. Here is a screenshot of our project:

screenshot_1

What you will need to complete this tutorial

To complete this tutorial, you will need a text editor. For beginning web developers I highly recommend Notepad++, which you can download for free from http://notepad-plus-plus.org/download/v6.5.5.html.

For simplicity’s sake I recommend creating a simple folder structure for the project. You do not have to follow this structure precisely but it does make things a little easier. Here is the recommended folder structure we will be using throughout this tutorial:

folder_structure

To create this structure, do the following:

  • Create a new folder on your desktop called Dynamic Content.
  • Inside the Dynamic Content folder, create a new folder called css. This is where the Cascading Style Sheet for the project will go.
  • Inside the Dynamic Content folder, create another new folder called scripts. Our JavaScript code will go here.
  • Inside the Dynamic Content folder, create a third folder called images. The musical note image for the project will go here.

Did you come across any errors in this tutorial? Please let us know by completing this form and we’ll look into it!

FREE COURSES
Python Blog Image

FINAL DAYS: Unlock coding courses in Unity, Godot, Unreal, Python and more.

Tutorial Source Code

You can download the source code of this tutorial here.

Getting Started

 Let’s create the basic HTML5 document structure and the css file for the project.

Open Notepad++. A new file is automatically created for you when the program loads. Save this file in the Dynamic Content folder as dynamic_content.html.

Create another new file by clicking on the New File icon in the upper left corner of the Notepad++ window (it looks like a white sheet of paper next to a green circle and a white + symbol inside the circle). This will create a new blank file and will appear as a new tab at the top of the Notepad++ window. This tab is automatically named new 2.

Name the new 2 file style.css and save it in the css folder.

Now we’re ready to start writing our HTML5 page. Click the dynamic_content.html tab at the top of the Notepad++ window and type the following code into Notepad++:


Dynamic Content

This code defines the basic HTML5 document structure for our project and also links the HTML page to our css file by using the tag.

Between the opening and closing tags, type the following code:

 

Piano Concerto #1

Greg Wilson

Recorded May 21, 2014

Musical note graphic

Here we have created a div with the id of ‘wrapper’ that contains the body of the page. The ‘container’ div represents the container that will hold all of our dynamic content. The ‘info’ div contains three paragraph elements and the musical note image, all of which will be displayed within the container. (The musical note image is packaged with the complete source code for this project available for download on this site).

Now let’s write the css that will style our page. Open the currently empty style.css file that you saved earlier and type the following code:

#wrapper {
font-family: sans-serif;
}

#container {
margin-top: 50px;
padding-top: 34px;
padding-bottom: 17px;
font-size: 25px;
border: 1px solid #e4e4eb;
border-radius: 10px;
box-shadow: 2px 2px 2px #888888;
width: 400px;
margin-right: auto;
margin-left: auto;
line-height: 15px;
}

#info {
margin-left: -100px;
}

#note {
float: right;
margin-top: -116px;
}

#title, #artist, #date {
text-align: center;
}

#title {
margin-top: -2px;
}

#artist {
margin-top: -10px;
}

#date {
font-size: 17px;
font-style: italic;
margin-top: -12px;
}

#links {
list-style-type: none;
line-height: 30px;
text-align: center;
margin-top: 50px;
}

The css adds some basic margin and padding along with a bordered container to hold our content.

Save the code you have written so far and view the web page in your browser. Your page should currently look like this:

screenshot_2

Each of the paragraph elements within the ‘info’ div have been assigned the ids ‘title’, ‘artist’, and ‘date’ respectively. We will be using these ids to update the content within the container.

We have more code to write within our HTML page but I want to leave the HTML for a few moments and turn to the JavaScript code that will enable us to update our content. Once we have a handle on the JavaScript, the remaining HTML code will make more sense.

We will write a JavaScript function that will handle the updating of our content which in this case is the title of a musical piece, the artist, and the date the piece was recorded.

A function is a block of code that performs a specific task. Our function will update specific content on our webpage based on the links that are clicked.

Create a new file in NotePad++ , name it changeContent.js and save it into the scripts folder. Within the changeContent.js file you just created, type the following code:

function changeContent(id1, content1, id2, content2, id3, content3)
{
var contentChange1 = document.getElementById(id1);
var contentChange2 = document.getElementById(id2);
var contentChange3 = document.getElementById(id3);
contentChange1.innerHTML = content1;
contentChange2.innerHTML = content2;
contentChange3.innerHTML = content3;
}

Save the code you just wrote by clicking the Save icon in Notepad++ . Open the dynamicContent.html file again. We’re going to finish writing the rest of the HTML code for the page and test it in the browser. Then we’ll examine the code we wrote and see how it works.

Place your mouse cursor at the end of this line of code:

Press Enter twice to create some empty space and type this code:

 

 

 

 

Your entire source code file for dynamicContent.html should look like this:

Dynamic Content

Piano Concerto #1

 

Greg Wilson

 

Recorded May 21, 2014

Musical note graphic

 

 

 

Save the dynamicContent.html file and open it in your browser. Clicking on each of the three links below the content container should update the information in the container with the appropriate music title, artist name, and recording date that corresponds to the link that was clicked.

Explanation of the code

 The JavaScript function that we wrote (changeContent.js) is responsible for updating our content when a link is clicked.

This function has six parameters: id1, content1, id2, content2, id3, content3. We pass this function ‘arguments’ from our HTML code which gives the function some data to work with.

Let’s say that we click the second item (Guitar Solo) in our unordered list of links below the container. The HTML code for this link is:

Here we are using the ‘onclick’ event to call our changeContent function. We are passing the function the element in our webpage that has an id of title and changing its content to Guitar Solo. Then we do the same with artist and title.

Back in our changeContent function:

  • The id1 parameter receives the id title as its argument.
  • The content1 parameter receives Guitar Solo as its argument.
  • The id2 parameter receives the id artist as its argument.
  • The content2 parameter receives Ron Smith as its argument.
  • The id3 parameter receives the id date as its argument.
  • The content3 parameter receives Recorded June 1, 2014 as its argument.

We have also created a variable to hold each id:

var contentChange1 = document.getElementById(id1);
var contentChange2 = document.getElementById(id2);
var contentChange3 = document.getElementById(id3);

The variable contentChange1 has been assigned the element with the id of title, contentChange2 has been assigned the id artist, and contentChange3 has been assigned the id date.

With our variables declared and initialized (assigned data values), we can update the content when the link is clicked:

contentChange1.innerHTML = content1;
contentChange2.innerHTML = content2;
contentChange3.innerHTML = content3;

Here we are using the innerHTML property to update our content. content1 is a parameter of the changeContent function. With respect to the second link on our webpage (Guitar Solo), the content1 parameter holds the value of the title Guitar Solo. We change this title from the one currently being displayed by changing the content of the element with the id of title by using the innerHTML property. Then we do the same for the artist name and the date recorded.

Not all JavaScript functions have parameters. Parameters are required if the function needs some data to work with. When you ‘call’ a function as we have done with our onclick event in our HTML code above, we are passing this function ‘arguments’ or data that is then assigned to the parameters so the function can perform the task that we need it to do.

The other two links in our HTML code work exactly the same way. Each link has an onclick event that calls the changeContent function and updates the content based on the arguments passed to the function.

Conclusion

JavaScript is not an easy subject to broach, especially for beginning web developers but the learning curve is worth the effort. If you are completely new to JavaScript, I hope this tutorial has given you some insight on the usefulness of the language in creating interactive and dynamic content for your webpages.