Question

尽管代码正在运行，但我只想了解它为什么会给我这个错误。单击按钮后，当我尝试调用变量＆＃34; home＆＃34;时，控制台告诉我它＆＃34; null＆＃34;。为什么？

var menu = document.getElementById("menu");
var botoes = document.getElementsByTagName("button");
var home = document.getElementById("home");


for(var i = 0; i < botoes.length; i++) {
  botoes[i].addEventListener("click", function() {
    shrink();
    if(botoes[3]) {
    }  else {
        createButton();
      }
  });
}


function shrink() {
  menu.style.margin = "10px";
  menu.style.width = "140px";
}


function createButton() {
  var newButton = document.createElement("button"); //creates button element
  var newButtonText = document.createTextNode("home"); //creates a text node
  newButton.appendChild(newButtonText); //appends the text to button
  var insertButton = menu.appendChild(newButton); //append button to body
  insertButton.className = "botoes"; //adds class to button
  newButton.id = "home"; //adiciona um id ao botao recentemente criado
}

Answer 1

你做了

var home = document.getElementById("home");

但如果文档尚未加载，则home变量将等于null，因为没有home元素

我认为最重要的是要添加：

home = newButton

实际上切换变量

如果主页按钮已存在，请将逻辑包装在onload函数中：

window.addEventListener('load', function() {
  var menu = document.getElementById("menu");
  var botoes = document.getElementsByTagName("button");
  var home = document.getElementById("home");


  for(var i = 0; i < botoes.length; i++) {
    botoes[i].addEventListener("click", function() {
      shrink();
      if(botoes[3]) {
      }  else {
          createButton();
        }
    });
  }


  function shrink() {
    menu.style.margin = "10px";
    menu.style.width = "140px";
  }


  function createButton() {
    var newButton = document.createElement("button"); //creates button element
    var newButtonText = document.createTextNode("home"); //creates a text node
    newButton.appendChild(newButtonText); //appends the text to button
    var insertButton = menu.appendChild(newButton); //append button to body
    insertButton.className = "botoes"; //adds class to button
    newButton.id = "home"; //adiciona um id ao botao recentemente criado
    // change buttons
    home = newButton;
  }
});

然后在结束时将主页设置为新按钮

如果按钮尚未创建，当您进行操作时，请检查它是否存在：

if (home) {
  // continue
}

Answer 2

Javascript按顺序执行。这意味着你的javascript加载它将执行：

var home = document.getElementById("home");

此时，尚未创建具有home id的元素。导致home变量为null。

稍后再次调用它时，它还没有被更改，因此返回null。

如果您在控制台中调用document.getElementById("home")，则会返回您创建的元素。

发表评论后：

我认为你误解了你的Javascript是如何被调用的。您没有将document.getElementById("home")函数引用到home变量，您所做的是获取函数返回的值并将其保留在变量中。那时恰好是null。

JS：在创建新元素并将其分配给变量之后，它为null

2 个答案: