单击 3 次时替换元素不起作用答案

【问题标题】：Replace Element When Clicked On 3 Times Won't Work单击 3 次时替换元素不起作用
【发布时间】：2020-01-15 17:19:09
【问题描述】：

我编写了简短的 javascript 代码以在单击 3 次后替换一个元素。超过 3 次点击后，该元素将自己替换为 url 之一。但问题是它不起作用。我试图让它在点击 3 次后自行替换，但是我可能编码错误。请赐教。

原代码：

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("replace1").innerHTML = this.responseText;   
    }
  };
  xhttp.open("GET", "https://natevanghacks.com/replacements/yoinkexecutor2.html"), true;
  xhttp.send();
}

重新编码后只能点击 3 次，但不起作用：

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  let count = 0;
  let callback = function() {
    count++;  
    if (count >= 3) {
      document.getElementById("replace1").innerHTML = this.responseText;  
    }
    iframe1.click(callback);  
    xhttp.open("GET", "https://natevanghacks.com/replacements/yoinkexecutor2.html"), true;
    xhttp.send();
  }
};

【问题讨论】：

究竟是什么不起作用？您可以使用 fetch 代替旧的 XMLHttpRequest
你在xhttp.open()后面有个奇怪的逗号表达式
它不会替换 url 的元素。虽然使用 fetch 可能是一个更好的主意，但 XMLHttpRequest 是我在网上找到的唯一东西。所以，我不确定代码的问题是什么。
是的，我明白这一点，但是如果您想检查 3，为什么还要检查 >= 1？
另外，当函数被调用时，count 将始终重置为零，因此将其设为 3 的可能性微乎其微...

标签： javascript html ajax replace element

【解决方案1】：

将count设置为全局变量意味着函数外：

let count = 0;
function loadDoc() {
  var xhttp = new XMLHttpRequest();

  let callback = function() {
    count++;  
    if (count >= 3) {
      document.getElementById("replace1").innerHTML = this.responseText;  
    }
    iframe1.click(callback);  
    xhttp.open("GET", "https://natevanghacks.com/replacements/yoinkexecutor2.html"), true;
    xhttp.send();
  }
};

当你在函数内部定义count，那么每次计数都会重置为默认值0

这就是为什么你需要在函数之外定义count。

【讨论】：

它似乎不起作用，我点击元素 3 次并没有替换它。
在函数的第一行添加count++; if (!(count >= 3)) {return;}