JavaScript中的自定義確認函式

這是我創建確認框的功能。

我希望該函式根據其中的兩個 onclick 函式回傳真/假。
但該功能不等待點擊。

那么，我能做些什么呢？

function Confirmation(title, message, confirm_button_value) {
  if (
    typeof title !== "undefined" ||
    typeof message !== "undefined" ||
    typeof confirm_button_value !== "undefined"
  ) {
    if (title !== "" || message !== "" || confirm_button_value !== "") {
      var confirmation;

      var confirmation_box = document.createElement("div");
      confirmation_box.classList.add("confirmation_box");

      var title_container = document.createElement("div");
      title_container.classList.add("confirmation_box_title");
      title_container.innerHTML = title;
      confirmation_box.append(title_container);

      var message_container = document.createElement("div");
      message_container.classList.add("confirmation_box_message");
      message_container.innerHTML = message;
      confirmation_box.append(message_container);

      var buttons_container = document.createElement("div");
      buttons_container.classList.add("confirmation_box_buttons");

      var confirm_button = document.createElement("span");
      confirm_button.classList.add("confirmation_box_confirm_button");
      confirm_button.innerHTML = confirm_button_value;
      buttons_container.append(confirm_button);

      var cancel_button = document.createElement("span");
      cancel_button.classList.add("confirmation_box_cancel_button");
      cancel_button.innerHTML = "Cancel";
      buttons_container.append(cancel_button);

      confirmation_box.append(buttons_container);

      document.body.append(confirmation_box);

      confirm_button.onclick = function () {
        confirmation = true;
      };

      cancel_button.onclick = function () {
        confirmation = false;
      };

      return confirmation;
    }
  }
}

（我更喜歡香草解決方案。）

uj5u.com熱心網友回復：

有3種方法可以解決這個問題

常規回呼方法

function Confirmation(title, message, confirm_button_value, callback) {
    if ( typeof title !== "undefined" || typeof message !== "undefined" || typeof confirm_button_value !== "undefined") {
        if (title !== "" || message !== "" || confirm_button_value !== "") {
            
            // removed for brevity
            
            confirm_button.onclick = function () {
                callback(true);
            };

            cancel_button.onclick = function () {
                callback(false);
            };
            return; // important this is here - so we don't throw the bad arguments error
        }
    }
    throw "Bad arguments";
}

用法

try {
    Confirmation("title", "message", "button value", function(result) {
        // handle the selection here
    });
} catch(err) {
    // handle errors here
}

或使用 Promises，無論如何這只是美化的回呼，因此，任何一種方法都意味著您正在使用回呼

function Confirmation(title, message, confirm_button_value) {
    return new Promise((resolve, reject) => {
        if ( typeof title !== "undefined" || typeof message !== "undefined" || typeof confirm_button_value !== "undefined") {
            if (title !== "" || message !== "" || confirm_button_value !== "") {
                
                // removed for brevity
                
                confirm_button.onclick = function () {
                    resolve(true);
                };

                cancel_button.onclick = function () {
                    resolve(false);
                };
                return; // important this is here!!!
            }
        }
        reject("bad arguments");
    });
}

用法

Confirmation("title", "message", "button value")
    .then(result => {
        // handle the selection here
    })
    .catch(err => {
        // handle your error here
    })

或使用 async/await - 這只是 Promises 的語法糖，但讓代碼更容易讓那些在 Promises/callbacks 中苦苦掙扎的人更容易
這不是魔法，它只是糖

確認功能與 Promise 版本相比沒有變化 - 雖然用法有所改變

用法 - 只能在函式內部作業，或者在現代瀏覽器async中的頂級module

try {
    const result = await Confirmation("title", "message", "button value");
    // handle result here
} catch(err) {
    // handle errors here
}

uj5u.com熱心網友回復：

在引數中添加回呼函式。當用戶單擊任何具有值的按鈕時呼叫回呼。

function Confirmation(title, message, confirm_button_value, callback) {
  if (
    typeof title !== "undefined" ||
    typeof message !== "undefined" ||
    typeof confirm_button_value !== "undefined"
  ) {
    if (title !== "" || message !== "" || confirm_button_value !== "") {

      var confirmation_box = document.createElement("div");
      confirmation_box.classList.add("confirmation_box");

      var title_container = document.createElement("div");
      title_container.classList.add("confirmation_box_title");
      title_container.innerHTML = title;
      confirmation_box.append(title_container);

      var message_container = document.createElement("div");
      message_container.classList.add("confirmation_box_message");
      message_container.innerHTML = message;
      confirmation_box.append(message_container);

      var buttons_container = document.createElement("div");
      buttons_container.classList.add("confirmation_box_buttons");

      var confirm_button = document.createElement("span");
      confirm_button.classList.add("confirmation_box_confirm_button");
      confirm_button.innerHTML = confirm_button_value;
      buttons_container.append(confirm_button);

      var cancel_button = document.createElement("span");
      cancel_button.classList.add("confirmation_box_cancel_button");
      cancel_button.innerHTML = "Cancel";
      buttons_container.append(cancel_button);

      confirmation_box.append(buttons_container);

      document.body.append(confirmation_box);

      confirm_button.onclick = function () {
        callback(true);
      };

      cancel_button.onclick = function () {
        callback(false);
      };

    }
  }
}

標籤：javascript 网络应用 前端 网络前端 确认

上一篇：UncaughtTypeError:Cannotreadpropertiesofundefined(reading'length')。Jquery中的自動建議

下一篇：未找到模塊-正在匯入React導航欄類...但檔案存在