Why is my hex code generator returning variable names instead of their values?-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

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;
});