Question

我有一个增加变量值的按钮，我使用此变量来加载特定内容。我的问题是，在页面加载后，我必须单击3次以进行第一次内容加载：

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

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

脚本：

＆＃13;

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();
}

＆＃13;

<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>

＆＃13;

我也尝试在changePokemon（）函数中声明我的变量，但只有第一个id加载我无法更改Pokemon_ID的值。我尝试使用const并让他们两个也没有工作

Answer 1

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

您需要从resetID()功能中取出changePokemon()。它需要在全局范围内，因此可以从onclick访问它。

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

DIV没有load事件。您需要将onload="resetID()"放在<body>标记中，或写一下：

window.onload = resetID;

在Javascript中。

＆＃13;

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();
}

＆＃13;

<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>

＆＃13;

onload变量初始化

1 个答案: