HTMLDialogElement: returnValue-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2022 browserübergreifend verfügbar.

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.

In diesem Artikel

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>

#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

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

HTML <dialog>-Element

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

HTML DOM API
HTMLDialogElement
Instanzeigenschaften
Instanzmethoden
Events
1. cancel
2. close
Vererbung
Verwandte Seiten für HTML DOM
Anleitungen
1. Verwenden von Microtasks in JavaScript mit queueMicrotask()
2. Im Detail: Microtasks und die JavaScript-Laufzeitumgebung