wordpressにも記載していきます。このコードはnoteにも記載したコードになります。即時関数を使用した形のプログラミングコードです。
document.getElementById("rectangle").innerHTML = (() => {
let color = ["#17dad1", "#2199ff", "#ff215e", "#21ffeb", "#21ff5b", "#8ba091", "#dab017", "#da17cb", "#ffffff"];
let str = "";
for (key in color) {
str += "<span style='color:" + color[key] + ";' class='color' data-color='" + color[key] + "'>■</span> ";
}
return str;
})();
let object = document.querySelectorAll(".color");
for (const key in object) {
if (Object.hasOwnProperty.call(object, key)) {
const element = object[key];
element.addEventListener("mouseover", function(e) {
document.body.style.backgroundColor = this.getAttribute("data-color");
});
}
}