Я создал div (переменная «коробка»), используя document.createElement внутри функции. Затем мне нужно использовать эту переменную внутри других функций. Можно ли получить доступ к этой переменной вне функции или назначить ее глобально после ее создания?
Мой код должен делать 3 вещи (это эскизный проект для Odin Project).
- создать сетку 16x16 блоков.
- позвольте пользователю ввести несколько полей и создать новую сетку на основе ввода пользователей.
- on mouseOver манипулирует цветом полей по-разному (помечены как «черный», «цвет» и «псих».
Что я пробовал (но потерпел неудачу).
поместите все функции в функцию "initGrid". Это потребовало от меня перемещения событийных прослушивателей для кнопок внутрь, и тогда они не будут работать.
используйте 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>