如何在原生JavaScript中获取AJAX动态生成的隐藏输入框的值？

嘿，这个问题我太熟了！你遇到的核心问题是：window.onload触发的时机，早于AJAX请求完成并把动态输入框插入DOM的时机，所以当你用document.getElementById('appStatus')的时候，这个元素还根本不存在，自然会报null的错误。

既然你说没法在AJAX的成功回调里处理逻辑，那我给你两个靠谱的解决方案：

方案一：用DOM突变观察器（MutationObserver）监听元素插入 #

这是最优雅、性能最好的方法，它能精准捕捉到DOM中新增元素的瞬间，不需要定时轮询。

// 先把Stripe初始化逻辑抽成独立函数，方便复用
function initStripe(appMode) {
  let stripe;
  // 注意！input的value是字符串类型，所以要和'0'比较，不是数字0
  if (appMode === '0') {
    stripe = Stripe('pk_test_xxxx');
  } else {
    stripe = Stripe('pk_live_xxxx');
  }
  // 这里可以继续写Stripe的后续初始化逻辑
}

// 创建DOM突变观察器实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach(() => {
    const appStatus = document.getElementById('appStatus');
    if (appStatus) {
      // 找到目标元素，执行初始化
      initStripe(appStatus.value);
      // 完成后停止观察，避免重复触发
      observer.disconnect();
    }
  });
});

// 配置观察选项：监听整个文档的子节点新增（也可以指定头部容器缩小范围）
const observerConfig = { childList: true, subtree: true };

// 启动观察
observer.observe(document.body, observerConfig);

方案二：定时轮询检查元素是否存在 #

如果觉得MutationObserver有点复杂，这种方法更简单直接——每隔一小段时间检查一次元素，直到找到为止：

function initStripe(appMode) {
  let stripe;
  if (appMode === '0') {
    stripe = Stripe('pk_test_xxxx');
  } else {
    stripe = Stripe('pk_live_xxxx');
  }
  // 后续逻辑
}

// 设置定时检查
const checkInterval = setInterval(() => {
  const appStatus = document.getElementById('appStatus');
  if (appStatus) {
    initStripe(appStatus.value);
    // 找到元素后立刻清除定时器
    clearInterval(checkInterval);
  }
}, 100); // 每100毫秒检查一次，可根据实际调整间隔

额外提醒 #

你之前的代码里有个小坑：隐藏输入框的value是字符串类型，所以判断的时候要用app_mode === '0'，而不是app_mode === 0，否则即使值是0，判断也会不成立哦！

内容的提问来源于stack exchange，提问作者Grogu