加载变量初始化答案

【问题标题】：onload variable initialization加载变量初始化
【发布时间】：2018-10-09 09:40:59
【问题描述】：

我有一个增加变量值的按钮，我使用这个变量来加载特定的内容。我的问题是页面加载后，我必须点击3次才能加载第一个内容：

第一次点击：我得到一个未定义的结果，因为没有加载 ID 第二次：我重新加载页面之前的输入字段值消失了第三次：第一个内容终于加载了

加载第一个内容后，一切正常。据我了解，这是因为该变量在页面加载时未初始化。所以我添加了一个 onload 事件，但它根本不起作用。

脚本：

var Pokemon_ID = 1

function changePokemon(Pokemon_ID) {

  function resetID() {
    document.getElementById("id-input").innerHTML = Pokemon_ID;
  }

  document.getElementById("right-btn").onclick = function() {
    Pokemon_ID++;
    document.getElementById("id-input").value = Pokemon_ID;
    document.getElementById("id-input").click();
  }

  document.getElementById("left-btn").onclick = function() {
    if (Pokemon_ID > 1) {
      Pokemon_ID--;
    }
    document.getElementById("id-input").value = Pokemon_ID;
    document.getElementById("id-input").click();
  }

  if (window.XMLHttpRequest) {
    // IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else { //IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {

      var parts = xmlhttp.responseText.split('|')
      document.getElementById("img").innerHTML = parts[0];
      document.getElementById("name").innerHTML = parts[1];
      document.getElementById("type-display1").innerHTML = parts[2];
      document.getElementById("categorie").innerHTML = "Categorie: " + parts[3];
      document.getElementById("talent").innerHTML = "Talent: " + parts[4];
      document.getElementById("taille").innerHTML = "Taille: " + parts[5];
      document.getElementById("poids").innerHTML = "Poids: " + parts[6];

    }
  }
  xmlhttp.open("GET", "get_id.php?q=" + Pokemon_ID, true);
  xmlhttp.send();
}

<div id="pokedex" onload="resetID()">

  <a id="right-btn" onclick="changePokemon(this.value)"></a>

  <a id="left-btn" onclick="changePokemon(this.value)"></a>

  <form>
    <input type="number" id="id-input" onclick="changePokemon(this.value)">
  </form>

</div>

我还尝试在 changePokemon() 函数中声明我的变量，但只有第一个 id 正在加载，我无法更改 Pokemon_ID 的值。我尝试使用 const 和 let 但它们都没有工作

【问题讨论】：

锚元素没有值，this.value 在right-btn 和left-btn 中应该是什么意思？

标签： javascript html

【解决方案1】：

您对全局变量和changePokemon() 函数的参数使用相同的名称Pokemon_ID。该参数是一个局部变量，因此对其赋值不会影响全局变量。给它一个不同的名字。

您需要将resetID() 从changePokemon() 函数中取出。它需要在全局范围内，以便可以从onclick 访问。

要更改输入，您需要分配给.value，而不是.innerHTML。

DIV 没有load 事件。你需要把onload="resetID()"放在<body>标签中，或者写：

window.onload = resetID;

在 Javascript 中。

var Pokemon_ID = 1

function resetID() {
  document.getElementById("id-input").value = Pokemon_ID;
}

function changePokemon(Pokemon_val) {


  document.getElementById("right-btn").onclick = function() {
    Pokemon_ID++;
    document.getElementById("id-input").value = Pokemon_ID;
    document.getElementById("id-input").click();
  }

  document.getElementById("left-btn").onclick = function() {
    if (Pokemon_ID > 1) {
      Pokemon_ID--;
    }
    document.getElementById("id-input").value = Pokemon_ID;
    document.getElementById("id-input").click();
  }

  if (window.XMLHttpRequest) {
    // IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else { //IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {

      var parts = xmlhttp.responseText.split('|')
      document.getElementById("img").innerHTML = parts[0];
      document.getElementById("name").innerHTML = parts[1];
      document.getElementById("type-display1").innerHTML = parts[2];
      document.getElementById("categorie").innerHTML = "Categorie: " + parts[3];
      document.getElementById("talent").innerHTML = "Talent: " + parts[4];
      document.getElementById("taille").innerHTML = "Taille: " + parts[5];
      document.getElementById("poids").innerHTML = "Poids: " + parts[6];

    }
  }
  xmlhttp.open("GET", "get_id.php?q=" + Pokemon_val, true);
  xmlhttp.send();
}

<div id="pokedex" onload="resetID()">

  <a id="right-btn" onclick="changePokemon(this.value)"></a>

  <a id="left-btn" onclick="changePokemon(this.value)"></a>

  <form>
    <input type="number" id="id-input" onclick="changePokemon(this.value)">
  </form>

</div>

【讨论】：

谢谢，它修复了它，但我的 onload 事件不会使内容加载到我的页面上。我想在加载时清空“id-input”字段或使内容在页面加载时直接显示。你能帮我吗？
onXXX 属性是在全局范围内执行的，所以需要将resetID() 移出函数。
非常感谢您的帮助，但即使我将“id-input”中的值移出功能，重新加载时仍不会重置它
我刚刚在 Chrome 上检查过，它可以工作，但在我增加到 ID 2 之前 ID 1 不会显示。而在 firefox 上它根本不起作用
resetID() 分配给.innerHTML，而不是.value。