Question

您好，亲爱的开发人员，

我不明白为什么会出错。可以告诉我为什么是错误，我的错在哪里。谢谢

(function() {
  const btn = document.getElementById('btn')
  const h1 = document.getElementById('h1')

  btn.addEventListener('click', () => {
    var hexvalues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 'a', 'b', 'c', 'd', 'e', 'f'];
    var hexcolor = '#'
    for (let i = 0; i < 6; i++) {
      var random = Math.floor(Math.random() * hexvalues.length);
      var hexcolor += hexvalues[random]
    }
    h1.style.color = hexcolor
  })
})()

如果我使用它，那么它就可以工作了var hexcolor = hexcolor + hexvalues[random]

Answer 1

似乎您的主要问题来自于您在hexcolor循环中重新声明for的事实。使用const，let，var创建变量时，不能使用+=运算符。 +=运算符表示加到（append）的末尾。因此，如果您是第一次创建变量，则将没有附加内容，因此需要使用=来分配变量。

要解决您的问题，您需要从var中删除var hexcolor，以便修改在for循环外声明的hexcolor。

请参见下面的工作示例：

(function() {
  const btn = document.getElementById('btn')
  const h1 = document.getElementById('h1')

  btn.addEventListener('click', () => {
    var hexvalues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 'a', 'b', 'c', 'd', 'e', 'f'];
    var hexcolor = '#'
    for (let i = 0; i < 6; i++) {
      var random = Math.floor(Math.random() * hexvalues.length);
      hexcolor += hexvalues[random]
    }
    h1.style.color = hexcolor
  })
})()

<button id="btn">Click me</button>

<h1 id="h1">Color me</h1>

Answer 2

使用var hexcolor += hexvalues[random]时，将使用带有初始化变量的+=。您不应该再次使用var作为外部声明

(function() {
  const btn = document.getElementById('btn')
  const h1 = document.getElementById('h1')

  btn.addEventListener('click', () => {
    var hexvalues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 'a', 'b', 'c', 'd', 'e', 'f'];
    var hexcolor = '#'
    for (let i = 0; i < 6; i++) {
      var random = Math.floor(Math.random() * hexvalues.length); 
      hexcolor += hexvalues[random]
    }
    console.log(hexcolor);
    h1.style.color = hexcolor
  })
})()

<button id="btn">click</button> 
<h1 id="h1">Heading</h1>

Answer 3

(function() {
      const btn = document.getElementById('btn')
      const h1 = document.getElementById('h1')
    
      btn.addEventListener('click', () => {
        var hexvalues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 'a', 'b', 'c', 'd', 'e', 'f'];
        var hexcolor = '#'
        for (let i = 0; i < 6; i++) {
          var random = Math.floor(Math.random() * hexvalues.length);
           hexcolor += hexvalues[random]
        }
        h1.style.color = hexcolor
      })
    })()

<button id="btn">CLICK ME</button>
    <h1 id="h1">Header text</h1>

你能告诉我什么是问题还是为什么是错误？

3 个答案: