无法使用materialize.css中的javascript在单击时更改按钮颜色

我是materialize.css的新手，实际上我想使用javascript更改单击时的按钮颜色。根据按钮内容，单击的每个按钮都必须产生不同的颜色。但当我点击按钮时，它并没有改变颜色

  <div class=" buttons  row center-align">
<button class="btn col s12 m6 deep-purple darken-4 center-align" id='button0'  onclick ="answer('0')" style ="display:none"><span class=" flow-text white-text text-darken-2" id="option0"></span></button><br>  
<button class="btn col s12 m6 deep-purple darken-4 center-align" id='button1'  onclick ="answer('1')" style ="display:none"><span class=" flow-text white-text text-darken-2" id="option1"></span></button><br>
<button class="btn col s12 m6 deep-purple darken-4 center-align" id='button2'  onclick ="answer('2')" style ="display:none"><span class=" flow-text white-text text-darken-2" id="option2"></span></button><br>
<button class="btn col s12 m6 deep-purple darken-4 center-align" id='button3'  onclick ="answer('3')" style ="display:none"><span class=" flow-text white-text text-darken-2" id="option3"></span></button><br>
 </div>

html

并在该html文件的自建css文件中；（main.css）

现在，当我们应用问题中提到的上述javascript方法时；按钮颜色将在单击html时更改

并在该html文件的自建css文件中；（main.css）

---

现在，当我们应用问题中提到的上述javascript方法时；按钮颜色将在单击时更改

是否也可以添加代码？无法分辨z.innerHTML是什么。option是按钮内跨度的id；也就是说他在按钮里面发短信。顺便说一句，逻辑工作正常，我还有一些其他语句在if-else语句中执行，只是按钮的颜色没有改变，你在底部缺少一个“}”吗？那是复印错误吗？是的。复制错误。是不是为了在materialize.css上改变样式，我们需要jquery？实际上我想出来了，我必须从类中删除按钮颜色按钮，并在我创建的自定义css文件中自定义按钮的背景色。你也可以添加代码吗？无法分辨z.innerHTML是什么。option是按钮内跨度的id；也就是说他在按钮里面发短信。顺便说一句，逻辑工作正常，我还有一些其他语句在if-else语句中执行，只是按钮的颜色没有改变，你在底部缺少一个“}”吗？那是复印错误吗？是的。复制错误。是不是为了在materialize.css上进行这种样式的更改，我们需要jquery？实际上我已经解决了这个问题，我必须从类中删除按钮颜色按钮，并在我创建的自定义css文件中自定义按钮的背景色。

 function answer(ans){
  var z = document.getElementById('option'+ans);
  var choice = z.innerHTML;
  var b = document.getElementById('button'+ans);
     if(choice == questions[x].answer){
       b.style.backgroundColor = '#008000'; 
       b.style.color = 'rgb(255, 255, 255)';}
     else{
       b.style.backgroundColor = '#700000';
       b.style.color = 'rgb(255, 255, 255)';}

<div class=" buttons  row center-align">
<button class="button col s12 m6  center-align" id='button0'  onclick ="answer('0')" style ="display:none"><span class=" flow-text white-text text-darken-2" id="option0"></span></button><br>  
<button class="button col s12 m6  center-align" id='button1'  onclick ="answer('1')" style ="display:none"><span class=" flow-text white-text text-darken-2" id="option1"></span></button><br>
<button class="button col s12 m6  center-align" id='button2'  onclick ="answer('2')" style ="display:none"><span class=" flow-text white-text text-darken-2" id="option2"></span></button><br>
<button class="button col s12 m6  center-align" id='button3'  onclick ="answer('3')" style ="display:none"><span class=" flow-text white-text text-darken-2" id="option3"></span></button><br>

 'button col s12 m6  center-align' 

.button.col.s12.m6.center-align{
   background-color: #311b92;
padding: 10px 20px 10px;
border-radius: 50px;
font-size: 2em;}