So I am trying to create a random hex code generator. So far I am just trying to get the 6 random values to be presented in the HTML.
// Letters A-F can be used and numbers 0-9
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;
});
//So each hex value can be number or letter
function hexOptions() {
var option = ["number", "letter"];
var randomOption = Math.floor(Math.random() * 2);
return option[randomOption];
}
Why is it returning the names of the variables rather than their values? Ex. #numbernumberletternumberletternumber
Your hexOptions function returns the string of either 'number' or 'letter'
You then assign the variables hex1 through to hex6 as the result of this function, concatenate them and return.
What you probably want is to use the result of hexOptions to choose either a letter or a number. Something like:
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();
const hex1Value = hex1 === 'number' ? Math.random() * 10 : letter;
// repeat for each of your hex values
color.innerHTML = "#" + hex1Value + hex2Value + hex3Value + hex4Value + hex5Value + hex6Value;
});
Your question above is why you get the result that you're getting. I will be answering exactly that.
var option = ["number", "letter"];
This is an array that contains 2 strings. Surely you're trying to do something else with that.
Calling option[0] on the above would return the word "number". That's the reason you're getting that result.