Author: John Au-Yeung

Sometimes, we want to add an event for a one time click to a function with JavaScript.

In this article, we’ll look at how to add an event for a one time click to a function with JavaScript.

How to add an event for a one time click to a function with JavaScript?

To add an event for a one time click to a function with JavaScript, we can call addEventListener with the once option set to true.

For instance, we write:

<button>
  click me
</button>

to add a button.

Then we write:

const button = document.querySelector('button')
button.addEventListener("click", () => {
  console.log('clicked')
}, {
  once: true
});

to select the button with querySelector.

Then we call button.addEventListener with 'click' and a click event listener callback to add a click listener to the button.

The callback will only run once since once is set to true in the object in the 3rd argument.

Conclusion

To add an event for a one time click to a function with JavaScript, we can call addEventListener with the once option set to true.

Sometimes, we want to sum elements at the same index in array of arrays into a single array with JavaScript.

In this article, we’ll look at how to sum elements at the same index in array of arrays into a single array with JavaScript.

How to sum elements at the same index in array of arrays into a single array with JavaScript?

To sum elements at the same index in array of arrays into a single array with JavaScript, we can use some array methods.

For instance, we write:

const arr = [
  [0, 1, 3],
  [2, 4, 6],
  [5, 5, 7],
  [10, 0, 3]
]
const [first] = arr
const sums = first.map((_, i) => {
  return arr.map(a => a[i]).reduce((a, b) => a + b, 0)
})
console.log(sums)

We get the first nested array from arr with destructuring and assign it to first.

Next, we call first.map with a callback that returns the items of each entry with the given index of each nested array.

Then we call reduce with a callback to sum all the entries together.

Therefore, sums is [17, 10, 19].

Conclusion

To sum elements at the same index in array of arrays into a single array with JavaScript, we can use some array methods.

Sometimes, we want to use an array as object keys in JavaScript.

In this article, we’ll look at how to use an array as object keys in JavaScript.

How to use an array as object keys in JavaScript?

To use an array as object keys in JavaScript, we can convert the array to a string.

For instance, we write:

const key = [1, 2, 3]
const obj = {
  [JSON.stringify(key)]: 'foo'
}
console.log(obj[JSON.stringify(key)])

to create the key array.

Then we convert it to a string with JSON.stringify so we can use it as a property key.

And we set the property’s value 'foo'.

Then we can access the value with obj[JSON.stringify(key)].

Therefore, the console log should log 'foo'.

Conclusion

To use an array as object keys in JavaScript, we can convert the array to a string.

Sometimes, we want to get pixel color from an image with JavaScript.

In this article, we’ll look at how to get pixel color from an image with JavaScript.

How to get pixel color from an image with JavaScript?

To get pixel color from an image with JavaScript, we can put the image in the canvas.

For instance, we write:

const myImg = new Image();
myImg.crossOrigin = "Anonymous";
myImg.onload = () => {
  const context = document.createElement('canvas').getContext('2d');
  context.drawImage(myImg, 0, 0);
  const {
    data
  } = context.getImageData(10, 10, 1, 1);
  console.log(data)
}
myImg.src = 'https://picsum.photos/200/300';

In myImg.onload we get the pixel data from the canvas by creating a canvas element with createElement.

Then we get the context with getContext.

Next, we call drawImage to draw the image.

And then we call getImageData with the x, y coordinates of the pixel to get as the first 2 arguments.

As a result, we see that data is a Uint8ClampedArray.

Conclusion

To get pixel color from an image with JavaScript, we can put the image in the canvas.