配列からランダムな色を選択する

Question

私はランダムに色配列から色を選択し、これら4つの値の中から選択するボタンをプログラムしようとしています。色は新しい要素に与えられます。

これらは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属性を設定するには、このようにそれを実行します。 そして、あなたはあなたがHTMLの値は次のように属性としてあなたがJavaScriptの変数を使用することはできません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>