Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue below:

HTMLDialogElement: returnValue property - Web APIs

The following example displays a button to open a dialog. The dialog asks the user if they want to accept a Terms of Service prompt.

The dialog contains "Accept" or "Decline" buttons: when the user clicks one of the buttons, the button's click handler closes the dialog, passing their choice into the close() function. This assigns the choice to the dialog's returnValue property.

In the dialog's close event handler, the example updates the main page's status text to record the returnValue.

If the user dismisses the dialog without clicking a button (for example, by pressing the Esc key), then the return value is not set.

<dialog id="termsDialog">
  <p>Do you agree to the Terms of Service (link)?</p>
  <button id="declineButton" value="declined">Decline</button>
  <button id="acceptButton" value="accepted">Accept</button>
</dialog>
<p>
  <button id="openDialogButton">Review ToS</button>
</p>
<p id="statusText"></p>

const dialog = document.getElementById("termsDialog");
const statusText = document.getElementById("statusText");

const openDialogButton = document.getElementById("openDialogButton");
const declineButton = document.getElementById("declineButton");
const acceptButton = document.getElementById("acceptButton");

openDialogButton.addEventListener("click", () => {
  dialog.showModal();
});

declineButton.addEventListener("click", closeDialog);
acceptButton.addEventListener("click", closeDialog);

function closeDialog(event) {
  const button = event.target;
  dialog.close(button.value);
}

dialog.addEventListener("close", () => {
  statusText.innerText = dialog.returnValue
    ? `Return value: ${dialog.returnValue}`
    : "There was no return value";
});

Try clicking "Review ToS", then choosing the "Accept" or "Decline" buttons in the dialog, or dismissing the dialog by pressing the Esc key, and observe the different status updates.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.3