javascript - 如何将获取响应保存为输入值

Question

我正在 try catch 客户端 IP 地址并将其自动存储为输入字段内的值。到目前为止，这是我的代码:

var Ip;
fetch('https://api.ipify.org/?format=json')
  .then(res => res.json())
  .then(data => Ip = data.ip)
  .then(() => console.log(Ip))
  .then(() => document.getElementById('awf_field-106493013').value = Ip);

这将返回错误:

Uncaught (in promise) TypeError: Cannot set property 'value' of null

.value 是它不喜欢的代码位，这似乎意味着 awf_field-106493013 为空，但我知道一个事实函数已被调用，输入已填充，我确信这是正确的输入 ID。

我错过了什么？

编辑输入如下所示:

<label class="previewLabel" for="awf_field-106493013">ipaddress:</label>
<div class="af-textWrap"><input type="text" id="awf_field-106493013" class="text" name="custom ipaddress" value=""  onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " tabindex="503" /></div>

这都是在 javascript 代码之前调用的，所以它应该在那里。

编辑 2 这是我当前页面上的所有 javascript，我刚刚制作了它，以便在文档准备好后进行 fetch 操作:

<script type="text/javascript">
function getUrlParam(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, '\\$&');
  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
      results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

var tid = getUrlParam("adid");
var date = Date(Date.now());

jQuery(document).ready(function () {
  setIp();

  jQuery('#awf_field-106493014').val(date.toString()); //Time
  if (tid != null) {
    jQuery('#awf_field-106493015').val(tid.toString()); //Tid
  } else {
    jQuery('#awf_field-106493015').val("nulltid"); //Tid
  }
});

function setIp(){
  var Ip;
  fetch('https://api.ipify.org/?format=json')
    .then(res => res.json())
    .then(data => Ip = data.ip)
    .then(() => console.log(Ip))
    .then(() => document.getElementById('awf_field-106493013').value = Ip);
}
</script>

返回相同

Answer 1

问题中的代码适合我 - 运行代码片段。最后 JS 行使用目标输入字段的替代选择器，但原始行(此处已注释掉)也可以正常工作。

function getUrlParam(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, '\\$&');
  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
      results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

var tid = getUrlParam("adid");
var date = Date(Date.now());

jQuery(document).ready(function () {
  setIp();

  jQuery('#awf_field-106493014').val(date.toString()); //Time
  if (tid != null) {
    jQuery('#awf_field-106493015').val(tid.toString()); //Tid
  } else {
    jQuery('#awf_field-106493015').val("nulltid"); //Tid
  }
});

function setIp(){
  var Ip;
  fetch('https://api.ipify.org/?format=json')
    .then(res => res.json())
    .then(data => Ip = data.ip)
    .then(() => console.log(Ip))
    .then(() => document.querySelector('*[name="custom ipaddress"]').value = Ip);
// was:        .then(() => document.getElementById('awf_field-106493013').value = Ip);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="previewLabel" for="awf_field-106493013">ipaddress:</label>
<div class="af-textWrap"><input type="text" id="awf_field-106493013" class="text" name="custom ipaddress" value=""  onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " tabindex="503" /></div>

备注

这不是一个真正的答案。它用于解决OP的问题，之后将被修改或删除