Category: JavaScript

Sometimes, we want to attach an click event handler to all links with JavaScript.

In this article, we’ll look at how to attach an click event handler to all links with JavaScript.

How to attach an click event handler to all links with JavaScript?

To attach an click event handler to all links with JavaScript, we can use event delegation.

For instance, we write:

<a>foo</a>
<a>bar</a>
<p>
  baz
</p>

to add some elements.

Then we write:

window.onclick = (e) => {
  if (e.target.tagName !== 'A') {
    return
  }
  console.log('clicked a')
}

to set the window.onclick property to a click event handler function.

In it, we check if tagName of the clicked element in the window is 'A'.

If it’s not, we stop running the function.

Otherwise, we run console.log.

Therefore, when we clicked an a element, we see 'clicked a' logged.

Conclusion

To attach an click event handler to all links with JavaScript, we can use event delegation.

Sometimes, we want to add the JavaScript equivalent of Python’s rsplit method.

In this article, we’ll look at how to add the JavaScript equivalent of Python’s rsplit method.

How to add the JavaScript equivalent of Python’s rsplit method?

To add the JavaScript equivalent of Python’s rsplit method, we can create our own function.

Fir instance, we write:

const rsplit = (str, sep, maxsplit) => {
  const split = str.split(sep);
  return maxsplit ? [split.slice(0, -maxsplit).join(sep)].concat(split.slice(-maxsplit)) : split;
}

const a = rsplit("blah,derp,blah,beep", ",", 1)
console.log(a)

to create the rsplit function.

In it, we call str.split with the sep separator to split the string into an array.

Then we combine the string with split.slice(0, -maxsplit).join(sep) concatenated with split.slice(-maxsplit) to return an array with the combined and split string.

If maxsplit isn’t set, then we return the split array as is.

Therefore, we get ['blah,derp,blah', 'beep'] from the console log.

Conclusion

To add the JavaScript equivalent of Python’s rsplit method, we can create our own function.

Sometimes, we want to return a date in UTC with Moment.js.

In this article, we’ll look at how to return a date in UTC with Moment.js.

How to return a date in UTC with Moment.js?

To return a date in UTC with Moment.js, we can use the moment.utc method.

For instance, we write:

const d = moment.utc('2022-10-29T00:00:00.000')
console.log(d)

to call moment.utc with the date string we want to parse.

As a result, d is a moment object with the date time in UTC.

Conclusion

To return a date in UTC with Moment.js, we can use the moment.utc method.

Sometimes, we want to clone a JavaScript class instance?.

In this article, we’ll look at how to clone a JavaScript class instance.

How to clone a JavaScript class instance?

To clone a JavaScript class instance, we can use some object methods.

For instance, we write:

class Foo {
  constructor(x) {
    this.x = x
  }
}

const foo = new Foo('bar')
const fooClone = Object.assign(Object.create(Object.getPrototypeOf(foo)), foo)
console.log(foo)
console.log(fooClone)

to create the Foo class.

Then we create a new Foo instance and assign it to foo.

To create a clone of foo, we call Object.create to create a new Foo instance with Object.getPrototypeOf(foo).

Then we call Object.assign to merge the contents of foo into the cloned object.

Conclusion

To clone a JavaScript class instance, we can use some object methods.

To set an img element’s src attribute with a JavaScript function’s return value, we can select the img element and set its src property.

For instance, we write:

<img />

to add an img element.

Then we write:

const getImgSrc = () => 'https://picsum.photos/200/300'

const img = document.querySelector('img')
img.src = getImgSrc()

to define the getImgSrc function to return the image URL string.

Then we select the img element with querySelector.

And then we set img.src to the value returned by getImgSrc.