switch won't change variables on click

Question

I am trying to make a color generator and have run into some issues. The way I'm doing this is by generating 6 random numbers between 1 and 15. If the number is less than or equal to 9, then it keeps it's value, however if it is above 9, it changes to "a", "b", "c" etc.

You can see my CodePen here: http://codepen.io/TheAndersMan/pen/vgqgqm?editors=0011

And here is my JavaScript:

document.querySelector("button").addEventListener("click", function() {
  let num1 = Math.floor((Math.random() * 15) + 1);
  let num2 = Math.floor((Math.random() * 15) + 1);
  let num3 = Math.floor((Math.random() * 15) + 1);
  let num4 = Math.floor((Math.random() * 15) + 1);
  let num5 = Math.floor((Math.random() * 15) + 1);
  let num6 = Math.floor((Math.random() * 15) + 1);
  console.log(num1, num2, num3, num4, num5, num6)
  let hex = function(num) {
    if (num <= 9) {
      num = num;
    } else if (num === 10) {
      num = 'a'
    } else {
      switch (num) {
        case 10:
          num = "a";
          break;
        case 11:
          num = "b";
          break;
        case 12:
          num = "c";
          break;
        case 13:
          num = "d";
          break;
        case 14:
          num = "e";
          break;
        case 15:
          num = "f";
      };
    };
  };
  hex(num1);
  hex(num2);
  hex(num3);
  hex(num4);
  hex(num5);
  hex(num6);
  console.log(num1, num2, num3, num4, num5, num6)
})

So I can't figure out why the switch doesn't change the numbers into a letter string. If someone can tell me what it is that would be great!

Answer 1

In programming, there is a difference between a reference to a value and a value itself. Because you are passing a raw value to hex, it is doing the right thing, but the value gets changed, but the associated memory value does not, since inside the function the refernce is no longer stored in num1, it is just that number being passed in, not the variable. You need to return the value and assign it to the variable again.

document.querySelector("button").addEventListener("click", function() {
  let num1 = Math.floor((Math.random() * 15) + 1);
  let num2 = Math.floor((Math.random() * 15) + 1);
  let num3 = Math.floor((Math.random() * 15) + 1);
  let num4 = Math.floor((Math.random() * 15) + 1);
  let num5 = Math.floor((Math.random() * 15) + 1);
  let num6 = Math.floor((Math.random() * 15) + 1);
  console.log(111, num1, num2, num3, num4, num5, num6)
  let hex = function(num) {
      switch (num) {
        case 10:
          return "a";
        case 11:
          return "b";
        case 12:
          return "c";
        case 13:
          return "d";
        case 14:
          return "e";
        case 15:
          return "f";
        default:
          return num;
      };
  };
  num1 = hex(num1);
  num2 = hex(num2);
  num3 = hex(num3);
  num4 = hex(num4);
  num5 = hex(num5);
  num6 = hex(num6);
  console.log(num1, num2, num3, num4, num5, num6)
})

<button>Click</button>

Also a tiny aside, but let should only be used inside blocks that are not functions, otherwise using var is the most valid way. So If you are not inside another block, try using var instead of let!

Here is a fun simplified version of your code:

var hexCharacters = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'];

function randomHex( optionalLength = 6 ){
  // Use `var` here since we are at the top-level inside this function
  var all = [];
  while( all.length < optionalLength ){
    // Use `let` here as we are inside a block inside the function
    let randomIndex = Math.floor( Math.random() * hexCharacters.length );
    all.push( hexCharacters[ randomIndex ] );
  }
  // Any `let` declared in a block is no longer available here
  return all;
}

document.querySelector('button').addEventListener('click', function(){
  document.querySelector('div').textContent = randomHex(6).join('');
})

<button>Random HEX!</button>
<div></div>

Answer 2

Because you do nothing with num

Try this :

document.querySelector("button").addEventListener("click", function() {
  let num1 = Math.floor((Math.random() * 15) + 1);
  let num2 = Math.floor((Math.random() * 15) + 1);
  let num3 = Math.floor((Math.random() * 15) + 1);
  let num4 = Math.floor((Math.random() * 15) + 1);
  let num5 = Math.floor((Math.random() * 15) + 1);
  let num6 = Math.floor((Math.random() * 15) + 1);
  console.log(num1, num2, num3, num4, num5, num6)
  let hex = function(num) {
    if (num <= 9) {
      num = num;
    } else if (num === 10) {
      num = 'a'
    } else {
      switch (num) {
        case 10:
          num = "a";
          break;
        case 11:
          num = "b";
          break;
        case 12:
          num = "c";
          break;
        case 13:
          num = "d";
          break;
        case 14:
          num = "e";
          break;
        case 15:
          num = "f";
      };
    };
    
    return num;
  };
  num1 = hex(num1);
  num2 = hex(num2);
  num3 = hex(num3);
  num4 = hex(num4);
  num5 = hex(num5);
  num6 = hex(num6);
  console.log(num1, num2, num3, num4, num5, num6)
})