対応するボタンを押すことによってテキストの色を複数回変更する

Question

##Code

<button type="button" onclick="buttonClick('red')">red</button>
<button type="button" onclick="buttonClick('orange')">orange</button>
<button type="button" onclick="buttonClick('blue')">blue</button>
<button type="button" onclick="buttonClick('finish')">finish</button>
<p id='iElement'>Hi!</p>

function changeColor(color,element){
if(color !== 'finish'){
  do {
    switch(color){
      case 'red':
      element.style.color = 'red';
      break;
      case 'blue':
      element.style.color = 'blue';
      break;
      case 'orange':
      element.style.color = 'orange';
      break;
    }//switch
  } while(color !== finish);//?
}//if
else{
  element.style.color = 'black';
}//else if
}//function changeColor

function buttonClick(color) {
const element = document.getElementById('iElement');
changeColor(color,element);
}//function buttonClick

##Action & Question
###コードを正しく理解します
期待される動作を実現するコードが表示されます。 しかし、偶然と試行錯誤によって作成されたため、これはなぜ起こるのかを理解されていません（たとえばdo...whileのstatementは明らかに奇妙です、しかし修正方法がわかりません）。
###より良い方法を見つけます
この試みは、以前に同じ目的によって作成されたコードが「対応するボタンを押すことによってテキストの色を1回変更する」ことしかできなかったために行われました。 反復処理(特に、 do...while)を使用するプログラムは初めて使用されるようなものなので、これは誤っているか、不適切に記述されている可能性があります。
##編集
###No.1: 目的を達成するコードが作成されました。
もう少し詳細なコードを書いているときにこのようなコードが機能しなかったため、簡略化されたテストが実行されていましたが、プロセスで何らかの問題が発生していたようです: 目的を達成するコードがすでに作成されています。ただし、誤解が生じた事実が警戒され、締切はいくらかの確認を経た後に実行されます。 また、コードは整形後に投稿されます。焦らないでください。
####No.2:No.1のコード

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 buttonClick(color) {
 const element = document.getElementById('iElement');
changeColor(color,element);
}

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

No.3: No.2のコードを修正しました

修正部分の抜けがありました。 同じことを繰り返したくないので、全部示すことにしました。また、このコードでは特に必要がなかったので、finishは省かれています。
###No.4: 既存回答の確認を完了次第、回答の受付が終了されます。
ループが必要だと誤解した理由に見当がつきました。 まだ十分に検証されていませんが、それはここに書く必要がある場合でも補足となる内容に過ぎないため、回答の受付はその検証とは無関係に終了されます。 焦らないでください。

Comments

[itagagaki]

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

[3_April_2021]

コードは整形後に投稿されます。焦らないでください。 現在お尋ねすることはありません

Answer 1

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

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

Comments

[3_April_2021]

if文の省略とcolor name?の直接的な設定を確認しました。残念ながら、等価演算子については十分な理解がありませんが、意図した範囲の処理が実行できることは確認しています。