ボタンを押してテキストの色を変更する方法

Question

ボタンを押すことでテキストの色を変更するコードを作成したい。

---

最初のコードではcolorが’finish’でない限り、switch文内の条件に基づいてelementのテキスト色を変更する処理が繰り返されていました。そのHTMLコードは、4つのボタンと1つのテキスト要素を含んでいました。それぞれのボタンには異なる色が設定されており、クリックされたときにhandleButtonClick関数が呼び出されます。handleButtonClick関数は引数として色の名前（‘red’、‘orange’、‘blue’、または’finish’）を受け取り、選択された色に応じて処理を実行します。このdo...while ループの使用は勘違いによるものであったため、次のコードに変更されました。

function changeColor(color, element) {
  switch(color) {
    case 'red': 
      element.style.color = 'red'; 
      break;
    case 'blue': 
      element.style.color = 'blue'; 
      break;
    case 'orange': 
      element.style.color = 'orange'; 
      break;
  }
}

function handleButtonClick(color) {
  const element = document.getElementById('textElement');
  changeColor(color, element);
}

<button type="button" onclick="handleButtonClick('red')">red</button>
<button type="button" onclick="handleButtonClick('orange')">orange</button>
<button type="button" onclick="handleButtonClick('blue')">blue</button>
<p id='textElement'>Hi!</p>

Comments

[itagagaki]

質問をより具体的にしてください。

[3_April_2021]

質問と質問の編集が完了しました。

Answer 1

ループする意味がないと思いますが・・・

function changeColor(color,element){
  if(color=="finish") color=null;
  element.style.color = color;
}

Comments

[3_April_2021]

回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。