onload变量初始化

nas 发表于 Dev

在

我有一个增加变量值的按钮，我使用此变量来加载特定的内容。我的问题是页面加载后，我必须单击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并让它使用，但是它们两个都没有用

巴尔玛

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

您需要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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。