JavaScript、三項演算子のエラー

前提・実現したいこと

エラーなく動作を実行したいのですが、なぜエラーが出るのかがわからないのでご教授いただきたいです。

発生している問題・エラーメッセージ

Uncaught SyntaxError: Unexpected token ';'

該当のソースコード

var total = document.getElementById('total');

total.addEventListener('click', function(){
  total.innerHTML = 'A' + money1 + 'B';
  people1.innerHTML = money2 + 'C';
  people2.innerHTML = money3 + 'D';

  money1 <= money2 ? comment.innerHTML = money2 + 'E': 
  money1 <= money3 ? comment.innerHTML = money3 + 'F':
  money1 > amount ? comment.innerHTML = 'G':
  money1 <= amount ? comment.innerHTML = 'H';←このセミコロンでエラーが出ます

}, false);

試したこと

var journey = document.getElementById('journey');

journey.addEventListener('click', function(){
  result1.innerHTML = money1 + 'A'; 
  result2.innerHTML = money2 + 'B'; 

  total <= amount ? comment.innerHTML = 'C' : comment.innerHTML = 'D';←ここではエラーが出ないです

}, false);

いずれも、もともときちんと動作していたif文を書き換えたものです。

このコードではエラーが出ないのですが、三項演算子の右結合？の仕方が間違っているのでしょうか？

よろしくお願い致します。

otn

2021/04/18 04:13

「三項演算子」ｎ「三項」とは「3つの項」の意味であることが分かっていなかった？

退会済みユーザー

2021/04/18 08:51

では else if を必要とする場合はどのように書けば良いのでしょうか？右側(false)になったら次に進む、という認識で仰られている3項目に当たる部分に次の条件を指定しています。他の方の回答で解決しておりますので、確認していただければと思います。

otn

2021/04/18 09:24

なんか誤解があるのでは？ A ? B : C ? D : E ? F : G ? H : I は、 A ? B : (C ? D : ( E ? F : (G ? H : I))) ということで、三項演算子は常に三項（条件、真の時の値、偽の時の値）が必要です。

退会済みユーザー

2021/04/18 09:35

すみません理解ができていないのですが、仰られている A ? B : C ? D : E ? F : G ? H : I は、 A ? B : (C ? D : ( E ? F : (G ? H : I))) ということつまり、 A ? B : C ? D : E ? F : G ? H : I　＝　A ? B : (C ? D : ( E ? F : (G ? H : I))) ということでどっちにしろ同じ動きをする、ということでしょうか？

otn

2021/04/18 09:38

はい。 A + B * C が A + (B * C) と同じだというのと同じ意味でそう書いています（括弧を冗長に付ける）。

退会済みユーザー

2021/04/18 09:56

ありがとうございます。ということは、私が書いた上のコードには「I」に当たる部分がないので、「三項演算子」ｎ「三項」とは「3つの項」の意味であることが分かっていなかった？という投稿をされたのでしょうか？

otn

2021/04/18 10:04 編集

はい。そうです。ちなみに、「条件Xが真なら、値Y、偽なら値false」という三項演算子のElse部がfalse固定のようなものは、 X && Y と書けます（演算子結合度が三項演算子と違うので組み合わせるなら注意）。「条件Xが真なら、値Y」とだけ言われると「じゃあ偽の時の値は？？」となって式にできません。

退会済みユーザー

2021/04/18 10:08

ありがとうございます。下の方のご指摘で気付いて修正したのですが、すでに解決した問題に対してのコメントだったのでどのような意図をもって「三項演算子」ｎ「三項」とは「3つの項」の意味であることが分かっていなかった？という投稿をされたのかがわからず、失礼な返答をしてしまいました。さらに詳しく教えてくださり、ありがとうございます。より理解が深まりました。

otn

2021/04/18 10:14

「三項演算子のElse部を書かない」という人は「三項」というのをどう捉えていたのか不思議でならなかったので、知りたくてコメントしました。

行動規範の内容に同意します

回答2件

三項演算子は condition ? exprIfTrue : exprIfFalse の様に condition が真の場合に評価する式と、偽の場合に評価する式を指定する必要があります。この場合、money1 <= amountが偽になるケースの条件が指定されていないためエラーになっています。該当条件の前にmoney1 > amountが条件になっているケースがあるので、

JavaScript
1  money1 <= money2 ? comment.innerHTML = money2 + 'E': 
2  money1 <= money3 ? comment.innerHTML = money3 + 'F':
3  money1 > amount  ? comment.innerHTML = 'G'
4                   : comment.innerHTML = 'H';
5
6  //または
7  comment.innerHTML = money1 <= money2 ? money2 + "E" :
8                      money1 <= money3 ? money3 + "F" :
9                      money1 > amount  ? "G" : "H";