What causes the undefined error when a promise rejection is encountered?

Question

What causes the undefined error when a promise rejection is encountered?

I am currently working on a functionality involving checkboxes within a list. The goal is to display an alert message congratulating the user once they have selected 5 checkboxes. I am implementing validation using promises, however, I am encountering an issue. When I do not use the reject code, everything works fine. But when I include the reject code as shown below, it executes and displays an error as 'undefined'. Can you help me pinpoint where I may have made a mistake?

let clickvalidation = new Promise(function(resolve, reject) {
  $('input[type=checkbox][id=chk1]').change(function() {
    if ($(this).is(':checked')) {
      noOfClick++;
      if (noOfClick == 5) {
        resolve();
      } else {
        reject();
      }
    }
  });
});

clickvalidation
  .then(function() {
    console.log('Success, You are a GEEK');
    alert(`Congrats 5 tasks have been successfully completed`);

  })
  .catch(function(e) {
    console.log(e.stack);
  });

javascript promise unhandled-promise-rejection

Answer 1

Answer №1

Remember, a promise can only be resolved once.

When you first toggle the checkbox, if you call reject() without passing any arguments, it will result in an error message of undefined.

Subsequent toggles of the checkbox will lead to calling either reject or resolve, but by then the promise will no longer be in a pending state.

Promises serve the purpose of notifying you of one result. They are not meant to handle multiple results.

In cases like this, where you require multiple results, it is more appropriate to use a standard event handler.

let counter = 0;

document.querySelector('input').addEventListener('change', () => {
  counter += 1;
});

document.querySelector('button').addEventListener('click', () => {
  if (counter === 5) {
    console.log("OK");
  } else {
    console.log("Not OK");
  }
});

<input type="checkbox"><button>OK</button>

Answer 2

Remember, a promise can only be resolved once.

When you first toggle the checkbox, if you call reject() without passing any arguments, it will result in an error message of undefined.

Subsequent toggles of the checkbox will lead to calling either reject or resolve, but by then the promise will no longer be in a pending state.

Promises serve the purpose of notifying you of one result. They are not meant to handle multiple results.

In cases like this, where you require multiple results, it is more appropriate to use a standard event handler.

let counter = 0;

document.querySelector('input').addEventListener('change', () => {
  counter += 1;
});

document.querySelector('button').addEventListener('click', () => {
  if (counter === 5) {
    console.log("OK");
  } else {
    console.log("Not OK");
  }
});

<input type="checkbox"><button>OK</button>

What causes the undefined error when a promise rejection is encountered?

Answer №1

Similar questions

Using jQuery to load the center HTML element

Incorporate text into the URL of the image

Guide on adding a timestamp in an express js application

Instructions for removing a single key value pair from every object in an array and transferring it to a designated object within the same array

Naming axes in Chart.js is a simple process that can easily be implemented

What term is used to describe this in recursion?

Is there a way for me to retrieve the variables saved within this array in JavaScript (vue.js)?

Pointer Permissions parsing does not permit creation

Tips for concealing a div in JavaScript when other divs are not present

How to iterate over an array and assign values to distinct labels using AngularJS

At runtime, the array inexplicably becomes null

Grabbing an element with Cheerio in Node.JS

Angular HttpClient does not support cross-domain POST requests, unlike jQuery which does

Methods for bypassing a constructor in programming

"Need to remove all chosen selections within an ng-repeat loop? Here's how

How to round whole numbers to whole numbers using JavaScript?

Node.Js error: "The requested resource does not have the 'Access-Control-Allow-Origin' header present."

Choose a random cell in Jquery every second

Ways to call a DIV element in a PHP file from a different PHP file

Display map.svg on the browser and execute a function when any area is clicked