Выбор случайного цвета из массива

Question

Я пытаюсь запрограммировать кнопку, которая случайно выбирает цвет из массива цветов и выбирает между этими четырьмя значениями, а цвет будет передан новому элементу.

Это классы, которые определены в 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>