HTMLDialogElement: returnValue-Eigenschaft

Ein String, der den returnValue des Dialogs repräsentiert. Standardmäßig ein leerer String ("").

Das folgende Beispiel zeigt eine Schaltfläche, um einen Dialog zu öffnen. Der Dialog fragt den Benutzer, ob er einen Nutzungsbedingungen-Prompt akzeptieren möchte.

Der Dialog enthält die Schaltflächen "Akzeptieren" oder "Ablehnen": Wenn der Benutzer auf eine der Schaltflächen klickt, schließt der Klick-Handler der Schaltfläche den Dialog und übergibt seine Wahl an die close()-Funktion. Dies weist der Wahl die returnValue-Eigenschaft des Dialogs zu.

Im close-Ereignishandler des Dialogs aktualisiert das Beispiel den Status-Text der Hauptseite, um den returnValue aufzuzeichnen.

Wenn der Benutzer den Dialog schließt, ohne auf eine Schaltfläche zu klicken (z. B. durch Drücken der Esc-Taste), wird der Rückgabewert nicht gesetzt.

HTML

<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>

JavaScript

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";
});

Ergebnis

Probieren Sie aus, "Nutzungsbedingungen überprüfen" zu klicken, dann die Schaltflächen "Akzeptieren" oder "Ablehnen" im Dialog auszuwählen oder den Dialog durch Drücken der Esc-Taste zu schließen und beobachten Sie die unterschiedlichen Statusaktualisierungen.

• Das HTML-Element, das dieses Interface implementiert: <dialog>.