Category: JavaScript

Categories
React Answers

How to fix onClick being called on render with React?

Labrador retriever puppy walking on green grass

Sometimes, we want to fix onClick being called on render with React.

In this article, we’ll look at how to fix onClick being called on render with React.

How to fix onClick being called on render with React?

To fix onClick being called on render with React, we can set the onClick prop to a function reference.

For instance, we write

const Square = ({ value }) => {
  return (
    <button className="square" onClick={() => alert("click")}>
      {value}
    </button>
  );
};

to set the onClick prop to a function that shows an alert box.

The function is called only when we click the button since we pass in the function’s reference rather than its returned value.

Conclusion

To fix onClick being called on render with React, we can set the onClick prop to a function reference.

Categories
JavaScript Answers

How to play a notification sound on websites with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to play a notification sound on websites with JavaScript.

In this article, we’ll look at how to play a notification sound on websites with JavaScript.

How to play a notification sound on websites with JavaScript?

To play a notification sound on websites with JavaScript, we can create a new audio element and call play on it.

For instance, we write

const playSound = (url) => {
  const audio = new Audio(url);
  audio.play();
};

to create the playSound function that creates a new Audio object with the source being the audio file at the url.

Then we call play on it to play the audio at the url.

Conclusion

To play a notification sound on websites with JavaScript, we can create a new audio element and call play on it.

Categories
JavaScript Answers

How to get elements by attribute when querySelectorAll with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to get elements by attribute when querySelectorAll with JavaScript.

In this article, we’ll look at how to get elements by attribute when querySelectorAll with JavaScript.

How to get elements by attribute when querySelectorAll with JavaScript?

To get elements by attribute when querySelectorAll with JavaScript, we can use the attribute selector.

For instance, we write

const els = document.querySelector('[role="button"]')

to call querySelector with '[role="button"]' to select all the elements that has the role attribute set to button.

Conclusion

To get elements by attribute when querySelectorAll with JavaScript, we can use the attribute selector.

Categories
JavaScript Answers

How to remove value from object without mutation with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to remove value from object without mutation with JavaScript.

In this article, we’ll look at how to remove value from object without mutation with JavaScript.

How to remove value from object without mutation with JavaScript?

To remove value from object without mutation with JavaScript, we can use the rest syntax.

For instance, we write

const omitProp = (obj, prop) => {
  const { [prop]: omit, ...res } = obj;
  return res;
};

to create the omitProp function that destructures the prop property from the obj object.

And then we get the rest of the properties in obj with the res object.

Finally, we return res.

Conclusion

To remove value from object without mutation with JavaScript, we can use the rest syntax.

Categories
JavaScript Answers

How to use querySelector with IDs that are numbers with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to use querySelector with IDs that are numbers with JavaScript.

In this article, we’ll look at how to use querySelector with IDs that are numbers with JavaScript.

How to use querySelector with IDs that are numbers with JavaScript?

To use querySelector with IDs that are numbers with JavaScript, we can use the attribute value selector.

For instance, we write

const el = document.querySelector("[id='1']");

to select the element with id attribute set to 1.

We have to do this since numbers aren’t valid IDs in CSS.

Conclusion

To use querySelector with IDs that are numbers with JavaScript, we can use the attribute value selector.