Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
JavaScript Answers

How to listen for DOM ready event with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to listen for DOM ready event with JavaScript.

In this article, we’ll look at how to listen for DOM ready event with JavaScript.

How to listen for DOM ready event with JavaScript?

To listen for DOM ready event with JavaScript, we listen to the DOMContentLoaded event.

For instance, we write

const onReady = () => {
  /* ... */
};

document.addEventListener("DOMContentLoaded", onReady);

to call addEventListener to listen for the DOMContentLoaded event.

We set onReady as its event listener.

It’s called when the DOM is done loading.

Conclusion

To listen for DOM ready event with JavaScript, we listen to the DOMContentLoaded event.

Categories
JavaScript Answers

How to get the second digit from a number with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to get the second digit from a number with JavaScript.

In this article, we’ll look at how to get the second digit from a number with JavaScript.

How to get the second digit from a number with JavaScript?

To get the second digit from a number with JavaScript, we convert it to a string and destructure it.

For instance, we write

const [, digit] = myVar.toString();

to call myVar.toString to return a string version of the myVar number.

Then we get the 2nd digit with `destructuring.

Conclusion

To get the second digit from a number with JavaScript, we convert it to a string and destructure it.

Categories
JavaScript Answers

How to change onclick attribute with JavaScript?

Labrador retriever puppy walking on green grass

To change onclick attribute with JavaScript, we set the onclick property.

For instance, we write

document.getElementById(id).onclick = () => {
  //...
};

to get the element with getElementById.

Then we set its onclick property to the click handler to set the onclick attribute value.

Categories
React Answers

How to get the scroll position with React?

Labrador retriever puppy walking on green grass

Sometimes, we want to get the scroll position with React.

In this article, we’ll look at how to get the scroll position with React.

How to get the scroll position with React?

To get the scroll position with React, we create our own hook.

For instance, we write

import { useEffect, useState } from "react";

export const useWindowScrollPositions = () => {
  const [scrollPosition, setPosition] = useState({ scrollX: 0, scrollY: 0 });

  useEffect(() => {
    const updatePosition = () => {
      setPosition({ scrollX: window.scrollX, scrollY: window.scrollY });
    };

    window.addEventListener("scroll", updatePosition);
    updatePosition();

    return () => window.removeEventListener("scroll", updatePosition);
  }, []);

  return scrollPosition;
};

to listen to the window scroll event with addEventListener.

We set updatePosition as the event listener.

In it, we get the x coordinate of the scroll position with window.scrollX.

And we get the x coordinate of the scroll position with window.scrollY .

We call setPositiion with an object with the values to update scrollPosition.

We remove the event listener with removeEventListener when the component unmounts.

Then we use it by writing

import { useWindowScrollPositions } from "path/to/useWindowScrollPositions";

export const MyComponent = () => {
  const { scrollX, scrollY } = useWindowScrollPositions();

  return (
    <div>
      Scroll position is ({scrollX}, {scrollY})
    </div>
  );
};

We call useWindowScrollPositions to return an object with the scroll coordinates.

Conclusion

To get the scroll position with React, we create our own hook.

Categories
JavaScript Answers

How to add commas or spaces to group every three digits with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to add commas or spaces to group every three digits with JavaScript.

In this article, we’ll look at how to add commas or spaces to group every three digits with JavaScript.

How to add commas or spaces to group every three digits with JavaScript?

To add commas or spaces to group every three digits with JavaScript, we use the toLocaleString method.

For instance, we write

console.log(Number(1234567890.12).toLocaleString());

to call toLocaleString on the number to return a string with the thousands separators included.

Conclusion

To add commas or spaces to group every three digits with JavaScript, we use the toLocaleString method.