Author: John Au-Yeung

Sometimes, we want to listen to the form submit event in JavaScript.

In this article, we’ll look at how to listen to the form submit event in JavaScript.

How to listen to the form submit event in JavaScript?

To listen to the form submit event in JavaScript, we call addEventListener on the form.

For instance, we write

document.querySelector("#myForm").addEventListener("submit", (e) => {
  if (!isValid) {
    e.preventDefault();
  }
});

to select the form with

document.querySelector("#myForm")

Then we call addEventListener on it with 'submit' and a callback that runs when we submit the form.

In the callback, we check if isValid is false.

If it is, we call e.preventDefault to prevent the default server side form submission behavior and do what we want.

Conclusion

To listen to the form submit event in JavaScript, we call addEventListener on the form.

Sometimes, we want to fix UnhandledPromiseRejectionWarning when testing using mocha or chai and JavaScript.

In this article, we’ll look at how to fix UnhandledPromiseRejectionWarning when testing using mocha or chai and JavaScript.

How to fix UnhandledPromiseRejectionWarning when testing using mocha or chai and JavaScript?

To fix UnhandledPromiseRejectionWarning when testing using mocha or chai and JavaScript, we call catch to catch the rejected promise.

For instance, we write

it("should transition with the correct event", () => {
  //...
  return new Promise((resolve, reject) => {
    //...
  })
    .then((state) => {
      assert(state.action === "DONE", "should change state");
    })
    .catch((error) => {
      assert.isNotOk(error, "Promise error");
    });
});

to add a test with it.

We call catch to catch promise rejections from the promise.

And we call assert.isNotOK to check the error from the rejected promise.

Conclusion

To fix UnhandledPromiseRejectionWarning when testing using mocha or chai and JavaScript, we call catch to catch the rejected promise.

Sometimes, we want to add an event listener for when element becomes visible with JavaScript.

In this article, we’ll look at how to add an event listener for when element becomes visible with JavaScript.

How to add an event listener for when element becomes visible with JavaScript?

To add an event listener for when element becomes visible with JavaScript, we can use the IntersectionObserver constructor.

For instance, we write

const options = {
  root: document.documentElement,
};

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    callback(entry.intersectionRatio > 0);
  });
}, options);

observer.observe(element);

to create an IntersectionObserver object with a callback and the options object.

The callback is run when the element we’re watching changes.

We get the element that intersects the element we’re watching with entries.

We set options.root to the root level element that we’re watching for element visibility for.

Conclusion

To add an event listener for when element becomes visible with JavaScript, we can use the IntersectionObserver constructor.

Sometimes, we want to fix JavaScript .replace only replaces first match.

In this article, we’ll look at how to fix JavaScript .replace only replaces first match.

How to fix JavaScript .replace only replaces first match?

To fix JavaScript .replace only replaces first match, we can use the replace method with a regex with the g flag.

For instance, we write

const textTitle = "this is a test";
const result = textTitle.replace(/ /g, "%20");
console.log(result);

to call replace with / /g to replace all spaces with "%20".

The g flag will make replace replace all instances of the match.

Conclusion

To fix JavaScript .replace only replaces first match, we can use the replace method with a regex with the g flag.

Sometimes, we want to add open-ended function arguments with TypeScript.

In this article, we’ll look at how to add open-ended function arguments with TypeScript.

How to add open-ended function arguments with TypeScript?

To add open-ended function arguments with TypeScript, we can use the rest syntax.

For instance, we write

const sum = (...numbers: number[]) => {
  let aggregateNumber = 0;
  for (const n of numbers) {
    aggregateNumber += n;
  }
  return aggregateNumber;
};

console.log(sum(1, 5, 10, 15, 20));

to create the sum function.

We make it accept an unlimited number of arguments with ...numbers.

And we get the arguments as an array.

We set the type to number[] so that numbers would be an array of numbers.

Then we loop through the numbers entries and add them to aggregateNumber.

And finally, we return the result.

Conclusion

To add open-ended function arguments with TypeScript, we can use the rest syntax.