HTMLDialogElement: thuộc tính returnValue

<dialog id="dialog">
  <p>Bạn có đồng ý với Điều khoản Dịch vụ (liên kết) không?</p>
  <button id="decline" value="declined">Từ chối</button>
  <button id="accept" value="accepted">Chấp nhận</button>
</dialog>
<button id="open">Mở hộp thoại</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;
}

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

openButton.addEventListener("click", () => {
  // Đặt lại giá trị trả về mỗi khi mở
  dialog.returnValue = "";
  updateReturnValue();
  // Hiển thị hộp thoại
  dialog.showModal();
});

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

function updateReturnValue() {
  log(`Giá trị trả về: "${dialog.returnValue}"`);
}

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

dialog.addEventListener("close", updateReturnValue);