Question

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

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

生成一个16x16盒子的网格。
让用户输入一些框并根据用户输入创建新的网格。
在mouseOver上，以不同方式（分别标记为“黑色”，“颜色”和“心理”）操纵框的颜色。

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

将所有函数放入“ initGrid”函数中。这要求我也将按钮的eventListeners移入其中，然后它们将无法工作。
使用container.childNodes尝试在创建的那些节点之后分配变量。
添加另一个“ let box = document.createElement（“ div”）;“试图将其命名为全局变量。
我不知道我尝试了多少其他事情，我输了。

请注意，此时我要使用的唯一按钮功能是“颜色”选项。我有其他人在工作，但他们在其他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";
  }
};

是否可以在函数外部访问此变量或在创建变量后对其进行全局分配？

是的，当然有可能，实际上declaration和initialization之间有很大的区别，您需要做的是在函数外部全局声明它并在函数中对其进行初始化。

像这样全局声明：

let box;

然后在您的函数中对其进行初始化

box = document.createElement("div");

Answer 2

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

function getrepos(users){
   let p = Promise.resolve(true);
    users.map(user => {
      p = p.then(() => axios.get(user.repos_url).then(userRepos => user.repos = userRepos));
    });
    return p.then(() => users);

}

JavaScript DOM-创建元素后访问由document.createElement制成的变量？

2 个答案: