Author: John Au-Yeung

Sometimes, we want to change an element’s class with JavaScript.

In this article, we’ll look at how to change an element’s class with JavaScript.

How to change an element’s class with JavaScript?

To change an element’s class with JavaScript=, we use the classList methods.

For instance, we write

document.getElementById("MyElement").classList.add("MyClass");
document.getElementById("MyElement").classList.remove("MyClass");
document.getElementById("MyElement").classList.toggle("MyClass");

to select the element with getElementById.

Then we call classList.add to add MyClass to the element.

We call classList.remove to remove MyClass from element.

And we call classList.toggle to toggle MyClass on the element.

Conclusion

To change an element’s class with JavaScript=, we use the classList methods.

Sometimes, we want to strip HTML from text with JavaScript.

In this article, we’ll look at how to strip HTML from text with JavaScript.

How to strip HTML from text with JavaScript?

To strip HTML from text with JavaScript, we can put the HTML in an element and then get the textContent from the element.

For instance, we write

const stripHtml = (html) => {
  const tmp = document.createElement("DIV");
  tmp.innerHTML = html;
  return tmp.textContent || tmp.innerText || "";
};

to define the stripHtml function that takes the html string.

In it, we create a div with createElement.

And then we assign html to the tmp.innerHTML to populate the div.

Then we get the plain text from the textContent or innerText properties.

Conclusion

To strip HTML from text with JavaScript, we can put the HTML in an element and then get the textContent from the element.

Sometimes, we want to check if an element contains a class in JavaScript.

In this article, we’ll look at how to check if an element contains a class in JavaScript.

How to check if an element contains a class in JavaScript?

To check if an element contains a class in JavaScript, we use the classList.contains method.

For instance, we write

const hasClass = element.classList.contains("class");

to call element.classList.contains with 'class' to check if element has the class class.

It’ll return true if it’s added and false otherwise.

Conclusion

To check if an element contains a class in JavaScript, we use the classList.contains method.

Sometimes, we want to play audio with JavaScript.

In this article, we’ll look at how to play audio with JavaScript.

How to play audio with JavaScript?

To play audio with JavaScript, we call the play method.

For instance, we write

const audio = new Audio("audio_file.mp3");
audio.play();

to create an audio element with the Audio constructor called with the path to the audio file.

Then we call play to play the audio file.

Conclusion

To play audio with JavaScript, we call the play method.

Sometimes, we want to prevent users from submitting a form by hitting Enter with JavaScript.

In this article, we’ll look at how to prevent users from submitting a form by hitting Enter with JavaScript.

How to prevent users from submitting a form by hitting Enter with JavaScript?

To prevent users from submitting a form by hitting Enter with JavaScript, we can check the keyCode and keyIdentifier properties.

For instance, we write

window.addEventListener(
  "keydown",
  (e) => {
    if (
      e.keyIdentifier === "U+000A" ||
      e.keyIdentifier === "Enter" ||
      e.keyCode === 13
    ) {
      e.preventDefault();
      return false;
    }
  },
  true
);

to listen to the keydown event on the page with addEventListener.

In the keydown listener function, we check for the enter key press with

e.keyIdentifier === "U+000A" || e.keyIdentifier === "Enter" || e.keyCode === 13

If any of them is true, then we call preventDefault to stop the submission.

Conclusion

To prevent users from submitting a form by hitting Enter with JavaScript, we can check the keyCode and keyIdentifier properties.