const mainebutton = document.querySelector("button");
const body = document.body;
function randomcolorgenerator() {
const red = Math.floor(Math.random() * 256);
const green = Math.floor(Math.random() * 256);
const blue = Math.floor(Math.random() * 256);
console.log(red, green, blue);
const randomcolor = "rgb ${red},${green},${blue}";
return randomcolor;
}
mainebutton.addEventListener("click", () => {
const randomcolor = randomcolorgenerator();
console.log(randomcolor);
});
Uncaught TypeError: Cannot read property of undefined (reading 'green')
You need to add a 'DOMContentLoaded' event listener to wait for your content to load before accessing them
And adding what @Luca has mentioned, this should be a template string:
"rgb ${red},${green},${blue}" should be enclosed in `` not ""
document.addEventListener('DOMContentLoaded', function(){
const mainebutton = document.querySelector("button");
const body = document.body;
function randomcolorgenerator() {
const red = Math.floor(Math.random() * 256);
const green = Math.floor(Math.random() * 256);
const blue = Math.floor(Math.random() * 256);console.log(red, green, blue);
const randomcolor = `rgb ${red},${green},${blue}`;
return randomcolor;
}
mainebutton.addEventListener("click", () => {
const randomcolor = randomcolorgenerator();
console.log(randomcolor);
});
})<button>SHOW ME A COLOR</button>