Author: John Au-Yeung

Sometimes, we want to get all elements by class name and the change class name for each with JavaScript.

In this article, we’ll look at how to get all elements by class name and the change class name for each with JavaScript.

How to get all elements by class name and the change class name for each with JavaScript?

To get all elements by class name and the change class name for each with JavaScript, we can select them all with document.querySelectorAll.

Then we spread the selected elements into an array with the spread operator and use the for-of loop to loop through them and change the class name for each element.

For instance, we write:

<div class='foo'>
  foo
</div>
<div class='foo'>
  foo
</div>
<div class='foo'>
  foo
</div>

to add 3 elements with class foo.

Then we write:

const els = document.querySelectorAll('.foo')
for (const el of [...els]) {
  el.className = "bar";
}

We select all the elements with:

const els = document.querySelectorAll('.foo')

Then we spread els into an array and loop through them with a for-of loop.

And in the body, we set el.className to 'bar' to change the class of each to bar.

Conclusion

To get all elements by class name and the change class name for each with JavaScript, we can select them all with document.querySelectorAll.

Then we spread the selected elements into an array with the spread operator and use the for-of loop to loop through them and change the class name for each element.

Sometimes, we want to convert a textarea’s string value to a JavaScript array separated by new lines.

In this article, we’ll look at how to convert a textarea’s string value to a JavaScript array separated by new lines.

How to convert a textarea’s string value to a JavaScript array separated by new lines?

To convert a textarea’s string value to a JavaScript array separated by new lines, we can get the value of the text area.

Then we call split on the string with '\n' to split it by the new line character into an array.

For instance, we write:

<textarea></textarea>

to add a text area.

Then we write:

const textarea = document.querySelector("textarea");
textarea.onchange = (e) => {
  const arr = e.target.value.split('\n')
  console.log(arr)
}

to listen to the change event by setting the textarea.onchange property to a function that gets the input value from e.target.value.

Then we call split with '\n' to split the string by the newline character into an array.

Conclusion

To convert a textarea’s string value to a JavaScript array separated by new lines, we can get the value of the text area.

Then we call split on the string with '\n' to split it by the new line character into an array.

Sometimes, we want to add an item to dropdown list in HTML using JavaScript.

In this article, we’ll look at how to add an item to dropdown list in HTML using JavaScript.

How to add an item to dropdown list in HTML using JavaScript?

To add an item to dropdown list in HTML using JavaScript, we can use a for loop.

For instance, we write:

<select>

</select>

to add a select element.

Then we write:

const select = document.querySelector("select");
for (let i = 2022; i >= 1900; i--) {
  const option = document.createElement('option');
  option.text = option.value = i;
  select.add(option, 0);
}

to select the select element with document.querySelector.

And then we use a for loop to loop from 2022 to 1900.

In the loop, we create the option element with:

const option = document.createElement('option');

Then we set the text and value to set the text and the value attribute value respectively.

And then we call select.add to add the option into the select.

Conclusion

To add an item to dropdown list in HTML using JavaScript, we can use a for loop.