Linking JavaScript to Dynamically Add Items

Introduction and Lesson Overview

Hello there, and welcome to our exciting journey into the world of web development! Today, we're going to take a deeper step into understanding the structure of a webpage and how we can make it interactive. Every web page you see on the Internet, from social media sites to your favorite news portals, is built using a combination of HTML and JavaScript . HTML structures the content, but JavaScript provides the interactivity! Our goal in this lesson is to grasp the basic structure of HTML and learn how to infuse life into it using JavaScript. We're going to start with a general overview of HTML and JavaScript, delve into understanding the structure of an HTML document, and then look at how we can add interactivity by linking JavaScript to HTML. Ready? Let's get started!

Introduction to JavaScript

JavaScript is a powerful and versatile programming language that enhances the functionality of web pages. Unlike HTML, which is a markup language used to structure and present content, JavaScript is a scripting language that enables you to create interactive and dynamic experiences on the web. JavaScript operates on the client's browser, meaning it runs directly on your visitors' devices, enabling quick responses to user actions without needing to communicate with a server. It can update and change both HTML and CSS, control multimedia, animate images, and even store data. For instance, JavaScript can display a pop-up alert, validate form data before it's submitted, or dynamically change the appearance of a webpage based on user interactions. This wide range of capabilities makes JavaScript essential for creating modern, interactive web applications. Imagine features like interactive photo galleries, real-time form validation, or dynamically updating content — all these can be achieved using JavaScript.

Basic JavaScript Concepts

Before we dive deeper into integrating JavaScript with HTML, it's essential to understand some fundamental JavaScript concepts. These concepts form the building blocks of JavaScript programming and will help you write more effective and efficient code.

Variables

A variable is a container for storing data values. In JavaScript, you can declare a variable using var, let, or const : JavaScript var name = "John Doe"; let age = 25; const isStudent = true; var : var is function-scoped and can be re-declared. It has a wider scope, which sometimes leads to unexpected behavior due to its ability to be hoisted (moved to the top of the scope). Function-scoped means that the variable is available within the function it is declared in, regardless of block boundaries within that function. JavaScript function example() {var x = 1; if (true) {var x = 2; // same variable! console.log(x); // 2} console.log(x); // 2} example(); let : let is block-scoped and can't be re-declared within the same scope. It is more predictable and less prone to errors compared to var as it does not hoist within its block. Block-scoped variables are confined to the block (defined by {}) in which they are declared. JavaScript function example() {let x = 1; if (true) {let x = 2; // different variable console.log(x); // 2} console.log(x); // 1} example(); const : const is block-scoped and can't be re-assigned after it's initialized. It is used for variables that should not change their value as they establish a contract that the variable will not be re-bound. JavaScript const y = 5; y = 10; // Error: Assignment to constant variable. const obj = {name: "John"}; obj.name = "Jane"; // this works because the reference to the object didn't change

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Dynamically Adding a Todo Item with JavaScript

Let's take a look at a practical example of how you can use JavaScript to add a new todo item to a list when a button is clicked. The following code demonstrates how to accomplish this:

JavaScript

document.getElementById('add-btn').addEventListener('click', function() {
    const newTodo = document.getElementById('new-todo').value;
    if (newTodo.trim() === '') return;
    const li = document.createElement('li');
    li.textContent = newTodo;
    document.getElementById('todo-list').appendChild(li);
    document.getElementById('new-todo').value = '';
});

document.getElementById('add-btn').addEventListener('click', function() {
    const newTodo = document.getElementById('new-todo').value;
    if (newTodo.trim() === '') return;
    const li = document.createElement('li');
    li.textContent = newTodo;
    document.getElementById('todo-list').appendChild(li);
    document.getElementById('new-todo').value = '';
});

Event Listener: We start by selecting the button with the id add-btn and attaching an event listener to it. This listener waits for the click event to occur. Unlike onclick, addEventListener allows for multiple event handlers to be attached to the same event, offering more flexibility. The addEventListener method is used here to set up an event that will fire a function when the button is clicked.
Get Input Value: When the button is clicked, we retrieve the value from the input field with the id new-todo. This is done using document.getElementById('new-todo').value, which accesses the DOM element and gets the current value entered by the user.
Check Input: We check if the input is empty (or only whitespace) using trim(), which removes whitespace from both ends of a string (e.g., " example ".trim() becomes "example"). If it is, we exit the function early to prevent adding empty items. The if (newTodo.trim() === '') return; line ensures we don't process empty or whitespace-only inputs.
Create List Item: If the input is valid, we proceed to create a new <li> element. This is achieved using document.createElement('li'), which creates a new list item element in the document.
Set Text Content: We set the text content of the new <li> element to the value of the todo item input. This is done using li.textContent = newTodo, which assigns the value from the input field to the text content of the newly created list item.
Add to List: We append the new <li> element to the existing unordered list with the id todo-list. This step involves using document.getElementById('todo-list').appendChild(li), which adds the new list item as a child element of the todo list.
Clear Input: Finally, we clear the input field by setting its value to an empty string. This is done with document.getElementById('new-todo').value = '', ensuring the input field is empty and ready for the next todo item to be entered by the user.

This script dynamically adds new items to a todo list, making our webpage interactive and responsive to user actions. Here's how you would include this script in your HTML:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Todo List</title>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>My Todo List</h1>
    <input type="text" id="new-todo" placeholder="Enter a new todo">
    <button id="add-btn">Add Todo</button>
    <ul id="todo-list"></ul>
    <script>
      // Include the JavaScript code here or in an external script.js file
      document.getElementById('add-btn').addEventListener('click', function() {
        const newTodo = document.getElementById('new-todo').value;
        if (newTodo.trim() === '') return;
        const li = document.createElement('li');
        li.textContent = newTodo;
        document.getElementById('todo-list').appendChild(li);
        document.getElementById('new-todo').value = '';
      });
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Todo List</title>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>My Todo List</h1>
    <input type="text" id="new-todo" placeholder="Enter a new todo">
    <button id="add-btn">Add Todo</button>
    <ul id="todo-list"></ul>
    <script>
      // Include the JavaScript code here or in an external script.js file
      document.getElementById('add-btn').addEventListener('click', function() {
        const newTodo = document.getElementById('new-todo').value;
        if (newTodo.trim() === '') return;
        const li = document.createElement('li');
        li.textContent = newTodo;
        document.getElementById('todo-list').appendChild(li);
        document.getElementById('new-todo').value = '';
      });
    </script>
  </body>
</html>

This example illustrates how to create a dynamic todo list where users can add new items by interacting with the webpage.

Introduction and Lesson Overview

Introduction to JavaScript

Basic JavaScript Concepts

Variables

Join the 1M+ learners on CodeSignal

Data Types

Functions

Using Semicolons in JavaScript

Conditionals

Loops

Linking JavaScript to HTML

Dynamically Adding a Todo Item with JavaScript

Lesson Summary