coding blog
Home

Yes No Alert In Javascript

7 min read Oct 13, 2024
Yes No Alert In Javascript

The alert() function in JavaScript is a handy tool for displaying simple messages to users. However, sometimes you need to interact with the user and get a response, like a simple "yes" or "no". While alert() doesn't offer this functionality directly, you can achieve this using a combination of confirm() and a bit of logic.

Using confirm() for Yes/No Interactions

The confirm() function is built-in to JavaScript and allows you to display a dialog box with a message and two buttons: "OK" and "Cancel". It returns a boolean value (true if the user clicks "OK" and false if they click "Cancel").

let userChoice = confirm("Are you sure you want to proceed?");

if (userChoice) {
  // User clicked "OK"
  console.log("User chose Yes!");
} else {
  // User clicked "Cancel"
  console.log("User chose No!");
}

In this example, the confirm() function presents the message "Are you sure you want to proceed?". If the user clicks "OK", the userChoice variable will be true, and the code within the if block will execute, displaying "User chose Yes!". If the user clicks "Cancel", userChoice will be false, and the code within the else block will execute, displaying "User chose No!".

Customizing Your Yes/No Dialog

You can customize the appearance and message of the confirm() dialog by modifying its parameters:

  • Message: The first parameter of confirm() is the message you want to display. Customize it to clearly state the question or choice you want the user to answer.

  • "OK" Button Text: You can change the text displayed on the "OK" button by using the confirm method of the window object and passing a custom ok option:

    window.confirm("Are you sure you want to proceed?", { ok: "Continue" });

    This will display "Continue" instead of "OK".

  • "Cancel" Button Text: Unfortunately, there's no built-in way to change the "Cancel" button text in standard confirm(). However, you can use libraries like SweetAlert2 to create more visually appealing and fully customizable dialogs.

Beyond Simple Yes/No: Custom Buttons

For more complex interactions than a simple yes/no, you can use JavaScript to create a custom dialog box with multiple buttons. This approach allows you to create a more user-friendly experience with specific options for the user.

Here's how you can create a custom dialog box:

  1. Create the HTML Structure:

  2. Style the Dialog (CSS):

    .hidden {
   display: none;
}

#my-dialog {
   background-color: white;
   border: 1px solid #ccc;
   padding: 10px;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

  3. Add JavaScript Event Listeners:

    // Display the dialog
document.getElementById('my-dialog').classList.remove('hidden');

// Attach event listeners to buttons
document.getElementById('yes-button').addEventListener('click', () => {
   console.log("User chose Yes!");
   // Close the dialog (remove the hidden class)
   document.getElementById('my-dialog').classList.add('hidden');
});

document.getElementById('no-button').addEventListener('click', () => {
   console.log("User chose No!");
   // Close the dialog (remove the hidden class)
   document.getElementById('my-dialog').classList.add('hidden');
});

Example: Confirmation Dialog for Deleting Data

Let's say you want to implement a confirmation dialog before allowing a user to delete data:





document.getElementById('delete-button').addEventListener('click', () => {
  document.getElementById('confirm-delete').classList.remove('hidden');
});

document.getElementById('confirm-delete-yes').addEventListener('click', () => {
  console.log("Deleting data...");
  // Your actual data deletion logic here
  document.getElementById('confirm-delete').classList.add('hidden');
});

document.getElementById('confirm-delete-no').addEventListener('click', () => {
  console.log("Canceling deletion.");
  document.getElementById('confirm-delete').classList.add('hidden');
});

This code will display a confirmation dialog when the "Delete Data" button is clicked. If the user clicks "Yes", the code for deleting data will execute. If they click "No", the dialog will close without performing any deletion.

Conclusion

Creating yes/no alert functionality in JavaScript is quite simple. You can use the built-in confirm() function for basic interactions, but for more complex scenarios, consider creating custom dialog boxes with multiple buttons. Remember to use clear and concise messages to ensure the user understands the choices they are making.

Featured Posts

×