javascript - 从数组中选择随机颜色

Question

这个问题已经有答案了:

How can I change an element's class with JavaScript? (34 个回答)

已关闭 6 年前。

我正在尝试编写一个按钮，该按钮从颜色数组中随机选择一种颜色，并在这四个值之间进行选择，并将该颜色赋予一个新元素。

它们是在 css 中定义的类。但它无法正常工作，因为我没有看到我正在做的事情有问题。

  <script>
    var colorArray = [ '.st1', '.st2', '.st3', '.st4'];
    var randomColor = Math.floor(Math.random()*colorArray.length);
    </script>

      <label>
        Class: <input type="text" id="new-class" value="randomColor">
      </label>

  <button type="button" onclick="addObject()">
    Make Ball
  </button>

有人能看出我做错了什么吗？

Answer 1

要使用 JavaScript 变量作为 HTML 值，您必须在 JavaScript 中设置它。因此，要设置您的 value 属性，请执行以下操作:并且您需要将代码包装在您在 onClick

中设置的函数中

<script>
    function addObject(){    
       var colorArray = ['.st1', '.st2', '.st3', '.st4'];
        var randomColor = Math.floor(Math.random() * colorArray.length);
        console.log(colorArray[randomColor]);
        document.getElementById("new-class").className = colorArray[randomColor];
    }
</script>