Проблема:
Ваша настоящая проблема в том, что вы объявляете 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");