JavaScript DOM - 在创建该元素后访问用 document.createElement 创建的变量？

Question

我在函数内部使用 document.createElement 创建了一个 div（变量 "box"）。然后我需要在其他函数中使用该变量。是否可以在函数外部访问此变量或在创建后全局分配它？

我的代码应该做 3 件事（蚀刻素描项目奥丁计划）。

生成一个 16x16 框的网格。
让用户输入多个框并根据用户输入创建新网格。
在 mouseOver 上以不同方式操纵框的颜色（标记为 "black" "color" 和 "psych"。

我尝试过的事情（但失败了）。

将所有函数放在"initGrid"函数中。这要求我也将按钮的 eventListeners 移到里面，然后它们就不起作用了。
使用container.childNodes尝试在创建的节点之后分配一个变量。
再添加一个"let box = document.createElement("div");"在变量之外试图将其命名为全局变量。
我不知道我还尝试了多少其他东西，我已经记不清了。

请注意，此时我试图开始工作的唯一按钮功能是 "color" 选项。我让其他人工作，但他们在其他 html 文件中。

任何帮助都会很棒，我迷路了。如果我可以澄清任何事情，请告诉我。

* {
 padding: 0;
 margin: 0;
}

header {
 text-align: center;
 background-color: maroon;
 padding:10px;
 margin: 10px 10px 20px 10px;
}

.title {
 font-family: sans-serif;
 font-size: 50px;
 color: white;
}

#wrapper{
 text-align: center;
 margin: 0px 0px 15px 0px;
}

#btn{
 color:red;
}

#container{
 margin:0 auto;
 display: flex;
    justify-content: center;
    flex-wrap: wrap;
 max-width:700px;
 max-height:700px;
 min-width: 700px;
 min-height: 700px;
 padding:10px;
 border:1px solid black;
}

.boxes{
 background-color: red;
 border: 0.125px solid white;
 box-sizing: border-box;
}

<!DOCTYPE html>
<html>

<head>
 <title>sketch</title>
 <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
 <header>
  <h1 class="title">Etch-A-Sketch</h1>
 </header>
 <div id="wrapper">
  <button id="btn">Reset Grid</button>
    </div>
   <div id=btns>
    <button id="black">Paint it Black</button>
    <button id="color">Rainbow</button>
    <button id="psych">Psychedelic Disco</button>
   </div>
 <div id="container">
 </div>
 <div id="prompt">
 </div>


 <script type="text/javascript">
  const container = document.getElementById("container");
  const rstbtn = document.getElementById("btn");
  const btns = document.getElementById("btns");
  const black = document.getElementById("black");
  const color = document.getElementById("color");
  const psych = document.getElementById("psych");
  let box = document.createElement("div");

  black.addEventListener("click",function(){
   option("black");
  });
  color.addEventListener("click",function(){
   option("color");
  });
  psych.addEventListener("click",function(){
   option("psych");
  }); 


  initGrid(16);

  function initGrid(num){
   for (let i=0; i<num; i++){
    for (let j=0; j<num; j++){

     let box = document.createElement("div");
            let boxSize = (690/num) + "px";
            box.style.height = boxSize;
            box.style.width = boxSize;
     box.classList.add("boxes");
     container.appendChild(box);

     box.addEventListener ("mouseover",function(){
     console.log("hover, hover, hover, hover");
     });
    }
   } 
  };


   function option(input){
    if (input == "color"){
     console.log("color picked is " + rainbow())
     box.style.backgroundColor = rainbow()
    }else if (input == "psych"){
     console.log("psych")
    }else{
     console.log("black")
    }
   };


  rstbtn.addEventListener("click", function(){
   let newNum = window.prompt ("Enter how many tiles you would like the new grid to be.", "16");
   container.innerHTML="";
   initGrid(newNum);

  });


  //color function
  function rainbow() {
   let randomNum = Math.floor(Math.random() * 10);
   if (randomNum == 0){
    return "yellow";
   }else if(randomNum == 1){
    return "orange";
   }else if(randomNum == 2){
    return "red";
   }else if(randomNum == 3){
    return "maroon";
   }else if(randomNum == 4){
    return "blue";
   }else if(randomNum == 5){
    return "indigo";
   }else if(randomNum == 6){
    return "pink";
   }else if(randomNum == 7){
    return "purple";
   }else if(randomNum == 8){
    return "green";
   }else if(randomNum == 9){
    return "lime";
   }else{
    return "black";
   }
  };
   
 </script>
   

</body>

</html>

Answer 1

问题：

您的实际问题是您声明了 box 两次，一次是全局的，另一次是函数内部的，因此第一个声明将因为函数中的声明而被提升。

在您的实际代码中，只需从函数中删除 let box = document.createElement("div");，它将作为函数内部的全局变量进行访问。

演示：

这就是您的最终代码：

const container = document.getElementById("container");
const rstbtn = document.getElementById("btn");
const btns = document.getElementById("btns");
const black = document.getElementById("black");
const color = document.getElementById("color");
const psych = document.getElementById("psych");
let box = document.createElement("div");

black.addEventListener("click", function() {
  option("black");
});
color.addEventListener("click", function() {
  option("color");
});
psych.addEventListener("click", function() {
  option("psych");
});


initGrid(16);

function initGrid(num) {
  for (let i = 0; i < num; i++) {
    for (let j = 0; j < num; j++) {

      let boxSize = (690 / num) + "px";
      box.style.height = boxSize;
      box.style.width = boxSize;
      box.classList.add("boxes");
      container.appendChild(box);

      box.addEventListener("mouseover", function() {
        console.log("hover, hover, hover, hover");
      });
    }
  }
};


function option(input) {
  if (input == "color") {
    console.log("color picked is " + rainbow())
    box.style.backgroundColor = rainbow()
  } else if (input == "psych") {
    console.log("psych")
  } else {
    console.log("black")
  }
};


rstbtn.addEventListener("click", function() {
  let newNum = window.prompt("Enter how many tiles you would like the new grid to be.", "16");
  container.innerHTML = "";
  initGrid(newNum);

});


//color function
function rainbow() {
  let randomNum = Math.floor(Math.random() * 10);
  if (randomNum == 0) {
    return "yellow";
  } else if (randomNum == 1) {
    return "orange";
  } else if (randomNum == 2) {
    return "red";
  } else if (randomNum == 3) {
    return "maroon";
  } else if (randomNum == 4) {
    return "blue";
  } else if (randomNum == 5) {
    return "indigo";
  } else if (randomNum == 6) {
    return "pink";
  } else if (randomNum == 7) {
    return "purple";
  } else if (randomNum == 8) {
    return "green";
  } else if (randomNum == 9) {
    return "lime";
  } else {
    return "black";
  }
};

Is it possible to access this variable outside the function or assign it globaly after it has been created?

是的，当然可以，其实declaration和initialization有很大的区别，你需要做的是在你的函数之外全局声明，然后在函数中初始化功能。

全局声明如下：

let box;

然后在你的函数中初始化它

box = document.createElement("div");

Answer 2

在每个函数外部创建变量以使其成为全局变量（使用 var 或 let）并且不为其分配任何数据，然后在任何函数内部使用它。示例：

let tokenSoundTrack;

function sound() {
tokenSoundTrack = 4;
}

function sound2() {
tokenSoundTrack = 2;
}

JavaScript DOM - 在创建该元素后访问用 document.createElement 创建的变量？

JavaScript DOM - access a variable made with document.createElement after that element is created?

javascript

variables

dom

declaration

createelement