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

Showing content from http://developer.mozilla.org/de/docs/Web/API/HTMLDialogElement/returnValue below:

HTMLDialogElement: returnValue-Eigenschaft - Web-APIs | MDN

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.

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

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.

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