Category: JavaScript

Sometimes, we want to detect back button or hash change in URL with JavaScript.

In this article, we’ll look at how to detect back button or hash change in URL with JavaScript.

How to detect back button or hash change in URL with JavaScript?

To detect back button or hash change in URL with JavaScript, we listen to the popstate event.

For instance, we write

window.addEventListener("popstate", (event) => {
  console.log(document.location, event.state);
});

to call addEventListener to listen to the popstate event triggered by window.

In the event handler callback, we get the current location with document.location.

And we get the change made with event.state.

Conclusion

To detect back button or hash change in URL with JavaScript, we listen to the popstate event.

Sometimes, we want to get array elements fulfilling a condition with JavaScript.

In this article, we’ll look at how to get array elements fulfilling a condition with JavaScript.

How to get array elements fulfilling a condition with JavaScript?

To get array elements fulfilling a condition with JavaScript, we use the array filter method.

For instance, we write

const filterResult = [1, 16, 4, 6].filter((x) => {
  return x > 5;
});
console.log(filterResult);

to call [1, 16, 4, 6].filter with a function that checks if the item x being iterated through is bigger than 5.

If it’s bigger than 5, then it’ll be included in the returned array.

Conclusion

To get array elements fulfilling a condition with JavaScript, we use the array filter method.

Sometimes, we want to disable an option in a select based on its value with JavaScript.

In this article, we’ll look at how to disable an option in a select based on its value with JavaScript.

How to disable an option in a select based on its value with JavaScript?

To disable an option in a select based on its value with JavaScript, we can set its disabled property to true.

For instance, we write

document.querySelectorAll("#foo option").forEach((opt) => {
  if (opt.value === "example") {
    opt.disabled = true;
  }
});

to select the option elements in the drop down with querySelector.

Then we call forEach with a callback that checks if the value attribute’s value is 'example'.

If it is, then we set its disabled property to true to disable it.

Conclusion

To disable an option in a select based on its value with JavaScript, we can set its disabled property to true.

Sometimes, we want to change audio element src with JavaScript.

In this article, we’ll look at how to change audio element src with JavaScript.

How to change audio element src with JavaScript?

To change audio element src with JavaScript, we set the element’s src attribute.

For instance, we write

const audio = document.getElementById("audio");

const source = document.getElementById("audioSource");
source.src = elm.getAttribute("data-value");

audio.load();
audio.play();

to select the audio element with getElementById.

Then we get the element with the data-value attribute with getElementById.

We use the data-value attribute value for the src attribute’s value.

Next we call load to preload the audio element with the clip from the new URL.

Then we call play to play it.

Conclusion

To change audio element src with JavaScript, we set the element’s src attribute.