如何在 vanilla JavaScript 中获取动态输入的值？

Question

I'm loading a dynamic header with a dynamic hidden input from php by doing an ajax request. The input gets created fine. The problem is not there. Below the same page I'm using plain javascript to get the value of that dynamic input. The Ajax and the javascript are two different codes. If they were not, I would simply load from ajax success but I can't do this here.

Problem is, in the console I get this error :

TypeError: document.getElementById(...) is null

How can I fix this?

hidden input

<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

You are calling document.getElementById('appStatus').value before your input field is generated by ajax request.

Use Promise for this

  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

Consider setTimeout function as success function

Add event DOMNodeInserted

When new element is inserted in document then function is automatically called

 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>