Question

我正在尝试制作颜色生成器并遇到一些问题。我这样做的方法是在1到15之间生成6个随机数。如果数字小于或等于9，则保持它的值，但如果它高于9，则变为“a”，“ b“，”c“等。

您可以在此处查看我的CodePen：variation of Edmond's algorithm for weighted graphs

这是我的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

因为您对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)
})

Answer 2

在编程中，引用与值和值本身之间存在差异。因为您正在将原始值传递给hex，所以它正在做正确的事情，但是值会更改，但相关的内存值却没有，因为内部该函数的引用是否定的存储在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>

切换不会在点击时更改变量

2 个答案: