javascript - JSONP请求链接到用户输入字段+按钮: only executes once

Question

这里是初学者，一直在网络上搜索，试图找出以前是否有人问过这个问题，但没有运气。

我一直在尝试创建一个对维基百科的 JSONP 请求，该请求链接到我页面上的用户输入字段，由按钮(即搜索字段)激活。页面加载后第一次使用时它会很好地触发(返回数字页面 id)，但此后如果我尝试再次搜索，它不会覆盖响应变量...

预先感谢您的帮助!

ps - 如果可能的话，我最好避免使用 jQuery 并坚持使用纯 JS，谢谢。

代码在这里:

var x = document.getElementById("test");
var y = document.getElementById("loadResults");
var wikiResponse;
var script = document.createElement("script");
var userInput;

function launchSearch () {
  if (document.body.contains(script)) {
    document.body.removeChild(script);
  }
  script.src = "https://en.wikipedia.org/w/api.php?action=query&titles=" + userInput + "&prop=revisions&rvprop=content&indexpageids=1&format=json&callback=loadResults"; 
  document.body.appendChild(script);
}

function loadResults(response) {
 wikiResponse = response.query.pageids[0];
 x.textContent = wikiResponse;
}

y.addEventListener("click", function() {
  userInput = document.getElementById("userInput").value;
  launchSearch();
});

Answer 1

您创建的脚本仅在由 createElement 创建时才会执行，如果从正文中删除然后使用 appendChild 再次添加，则不会执行(请参阅 this answer ) .

相反，每次您想要执行加载时，请尝试创建该元素(使用 createElement)，而不是从 DOM 中删除该元素并再次重新添加。