如何在 vanilla JavaScript 中獲取動態輸入的值？

Question

我正在通過執行 ajax 請求從 php 加載帶有動態隱藏輸入的動態標頭。 輸入創建得很好。 問題不在這里。 在同一頁面下方，我使用普通的 javascript 來獲取該動態輸入的值。 Ajax 和 javascript 是兩種不同的代碼。 如果不是，我會簡單地從 ajax 成功加載，但我不能在這里這樣做。

問題是，在控制台中我收到此錯誤：

類型錯誤：document.getElementById(...) 為空

我怎樣才能解決這個問題？

隱藏輸入

<input id="appStatus" type="hidden" value="0">

javascript

window.onload = function() {

 var app_mode = document.getElementById('appStatus').value;

    if (app_mode === 0) {//dev

        var stripe = Stripe('pk_test_xxxx');

    } else {//live prod

        var stripe = Stripe('pk_live_xxxx');
    }

};

Answer 1

在 ajax 請求生成輸入字段之前，您正在調用 document.getElementById('appStatus').value。

為此使用 Promise

  function getInput() {
      return new Promise((resolve, reject) => {
        $.ajax({
            ...,
            success: function(response) {
                resolve(response);
            },
            error: function() {
                reject();
            }
        });  
      });
    }

window.onload = function() {
getInput().then(response => {
  var app_mode = document.getElementById('appStatus').value;

  if (app_mode === 0) {//dev
     var stripe = Stripe('pk_test_xxxx');
  } else {//live prod
     var stripe = Stripe('pk_live_xxxx');
  })
}

Answer 2

將setTimeout函數視為success函數

添加事件DOMNodeInserted

在文檔中插入新元素時，將自動調用函數

 document.body.addEventListener("DOMNodeInserted",function() { var app_mode = document.getElementById('appStatus'); if(!app_mode) return; console.log(app_mode.value); }); setTimeout(()=>{ document.querySelector("div").innerHTML = '<input id="appStatus" type="text" value="0">'; },3000);

 <div></div>