classList.toggle() removeChild() alert()

 

1. HTML Input Element

1.1 Placeholder

Placeholder is the text that appears in the HTML

input

element when no value is set. We can specify it using the HTML attribute

placeholder

.

1

<input type="text" placeholder="Enter your name" />

HTML

2. JavaScript Built-in Functions

2.1 alert()

The

alert()

function displays an alert box with a specified message and an OK button.

1

alert("Enter Valid Text");

JAVASCRIPT

3. DOM Properties

3.1 Checked

The

checked

property sets or returns the checked status of an HTML checkbox

input

element as a boolean value.

1

2

let checkboxElement = document.getElementById(checkboxId);

checkboxElement.checked = true;

JAVASCRIPT

4. DOM Manipulations

4.1 The removeChild() Method

The

removeChild()

method removes an HTML child element of the specified HTML parent element from the DOM and returns the removed HTML child element.

1

2

3

4

5

function onDeleteTodo(todoId) {

let todoElement = document.getElementById(todoId);

todoItemsContainer.removeChild(todoElement);

}

JAVASCRIPT

4.2 The classList.toggle() Method

The

classList.toggle()

method is used to toggle between adding and removing a class name from an HTML element.

1

2

3

4

5

6

function onTodoStatusChange(checkboxId, labelId) {

let checkboxElement = document.getElementById(checkboxId);

let labelElement = document.getElementById(labelId);

labelElement.classList.toggle('checked');

}

JAVASCRIPT

We can replace

classList.add()

and

classList.remove()

methods with

classList.toggle()

method.

Try out adding the placeholder to the HTML input elements, deleting the HTML child elements, adding alerts and toggling the class names in the below Code Playground.