HTMLDialogElement: returnValue プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2022年3月.

returnValue は HTMLDialogElement インターフェイスのプロパティで、<dialog> 要素が閉じたときの返値を表す文字列です。値を直接設定したり (dialog.returnValue = "result")、 close() や requestClose() に文字列引数として提供する形設定したりすることができます。

値

ダイアログの returnValue を表す文字列です。既定値は空文字列 ("") です。

例

返値の確認

次の例は、ダイアログを開くためのボタンを表示します。ダイアログは、利用規約の受け入れをユーザーに依頼します。

ダイアログには［承諾］または［拒否］ボタンが含まれます。ユーザーがどちらかのボタンをクリックすると、そのボタンのクリックハンドラーがダイアログを閉じ、選択内容を close() 関数に渡します。これにより、選択内容がダイアログの returnValue プロパティに代入されます。

ダイアログの close イベントハンドラー内で、この例ではメインページのステータステキストを更新し、 returnValue を記録します。

ユーザーがボタンをクリックせずにダイアログを閉じると（例えば、 Esc キーを押すなど）、返値は設定されません。

HTML

html
<dialog id="termsDialog">
  <p>利用規約に同意しますか？（リンク）</p>
  <button id="declineButton" value="declined">拒否</button>
  <button id="acceptButton" value="accepted">承諾</button>
</dialog>
<p>
  <button id="openDialogButton">利用規約の確認</button>
</p>
<p id="statusText"></p>

JavaScript

js
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
    ? `返値: ${dialog.returnValue}`
    : "返値はありません";
});