I am currently working on developing a unique hex code generator using random values. At the moment, my focus is on displaying six random values in the HTML.
// The characters A-F and numbers 0-9 can be utilized
var button = document.querySelector(".hex-btn");
var color = document.querySelector(".chosen-color");
button.addEventListener("click", function () {
var number = Math.floor(Math.random() * 10);
var letterString = ["a", "b", "c", "d", "e", "f"];
var chosenLetter = Math.floor(Math.random() * 6);
var letter = letterString[chosenLetter];
hex1 = hexOptions();
hex2 = hexOptions();
hex3 = hexOptions();
hex4 = hexOptions();
hex5 = hexOptions();
hex6 = hexOptions();
color.innerHTML = "#" + hex1 + hex2 + hex3 + hex4 + hex5 + hex6;
});
// Each hex value can be either a number or a letter
function hexOptions() {
var option = ["number", "letter"];
var randomOption = Math.floor(Math.random() * 2);
return option[randomOption];
}
I am experiencing an issue where it is showing variable names instead of their actual values. For instance, #numbernumberletternumberletternumber gets displayed. Any guidance on why this might be happening?