HTMLDialogElement: returnValue-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 2022.

Die returnValue-Eigenschaft des HTMLDialogElement-Interfaces ist ein String, der den Rückgabewert für ein <dialog>-Element repräsentiert, wenn es geschlossen wird. Sie können den Wert direkt setzen (dialog.returnValue = "result") oder den Wert als String-Argument an close() oder requestClose() übergeben.

Wert

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

Beispiele

Überprüfen des Rückgabewerts

Das folgende Beispiel zeigt eine Schaltfläche, um einen Dialog zu öffnen. Der Dialog fragt den Benutzer, ob er einer Aufforderung zu den Nutzungsbedingungen zustimmen 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 die Wahl der returnValue-Eigenschaft des Dialogs zu.

Im close-Ereignishandler des Dialogs wird der Status-Text der Hauptseite aktualisiert, um den returnValue zu protokollieren.

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

HTML

html

<dialog id="dialog">
  <p>Do you agree to the Terms of Service (link)?</p>
  <button id="decline" value="declined">Decline</button>
  <button id="accept" value="accepted">Accept</button>
</dialog>
<button id="open">Open dialog</button>

<pre id="log"></pre>

#log {
  height: 170px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

JavaScript

const dialog = document.getElementById("dialog");
const openButton = document.getElementById("open");
const declineButton = document.getElementById("decline");
const acceptButton = document.getElementById("accept");

openButton.addEventListener("click", () => {
  // Reset the return value on each open
  dialog.returnValue = "";
  updateReturnValue();
  // Show the dialog
  dialog.showModal();
});

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

function updateReturnValue() {
  log(`Return value: "${dialog.returnValue}"`);
}

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

dialog.addEventListener("close", updateReturnValue);

Ergebnis

Klicken Sie auf "Dialog öffnen", wählen Sie dann die Schaltflächen "Akzeptieren" oder "Ablehnen" im Dialog oder schließen Sie den Dialog, indem Sie die Esc-Taste drücken. Beobachten Sie die verschiedenen Statusaktualisierungen.

Spezifikationen

Specification
HTML # dom-dialog-returnvalue-dev

Browser-Kompatibilität

Siehe auch

HTML <dialog>-Element

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden