開關不會在點擊

Question

改變變量我試圖做一個顏色發生器和遇到了一些問題。我這樣做的方式是在1到15之間生成6個隨機數。如果數小於或等於9，則它保持它的值，但是如果它高於9，則它變爲「a」，「 b」， 「C」 等

你可以在這裏看到我的CodePen：http://codepen.io/TheAndersMan/pen/vgqgqm?editors=0011

這裏是我的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) 
}) 

所以我想不通爲什麼交換機不將數字更改爲字母串。如果有人能告訴我那會是多麼棒！

Answer 1

在編程中，有一個參考一個值和值本身之間的差異。因爲你將原料價值hex，它是做正確的事情，但這個值被改變了，但相關的內存值不，因爲內的refernce不再存儲在num1的功能，它只是號碼通過，不是變量。您需要返回該值並將其重新分配給該變量。

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>

另外一個微小的一邊，但let應該只裏面不是函數塊使用，否則使用var是最有效的方式。所以，如果你不在另一個區域內，請嘗試使用var而不是let！

這是一個有趣的簡化版你的代碼：

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

因爲你什麼都不做與num

試試這個：

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