JavaScript　if/else文が動かない（初プログラミング)

前提・実現したいこと

このjavascriptが動かない。
ボタンを押すと、セルにインプットし数値の合計を四則演算させるところまでは正常に動きます。
if/else文が全く作動しません。ざっとみて、おかしいところをご指摘いただけますととてもありがたいです。
丸二日格闘しましたが、自分ではおかしいところが全くわからず、
質問するしかないと考えました。先輩方、是非ご教授のほどよろしくお願いします。

liveweaveと色々なjavascriptのサイト、書店での書籍を見ながら、初めてコーディング（と呼んで良いのか）してみました。エクセルはそこそこ得意なので、楽しくプログラミングできています。
が、下記のif/else文が作動しない理由が全く見当つきません！

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

if/else文が動かない

該当のソースコード

javascript
1<!DOCTYPE html>
2<html>
3<head>
4<title>HTML, CSS and JavaScript demo</title>
5</head>
6<body>
7<!-- Start your code here -->  
8<HTML>
9<HEAD>
10<SCRIPT TYPE="text/javascript">
11    function calc()
12    {
13        var datA,datB,datC;
14      datA = eval(document.form01.txt01.value);
15      datB = eval(document.form01.txt02.value);
16      datC = eval(document.form01.txt03.value);
17      document.form01.txt04.value = (datA + datB + datC);
18document.form01.txt05.value = if (datA + datB + datC) <= 5000){
19　(datA + datB + datC) * 0.15;}
20else if (datA + datB + datC) <= 10000){
21　　(datA + datB + datC) * 0.25 - 555;
22　}else{(datA + datB + datC) * 0.35 - 999　
23    ;}
24       }
25</SCRIPT>
26</HEAD>
27<BODY>
28<FORM NAME="form01">
29インプット項目A：<INPUT TYPE="TEXT" NAME="txt01" SIZE="10">円<BR>
30インプット項目B：<INPUT TYPE="TEXT" NAME="txt02" SIZE="10">円<BR>
31インプット項目C：<INPUT TYPE="TEXT" NAME="txt03" SIZE="10">円<BR>
32合計： <INPUT TYPE="TEXT" NAME="txt04" SIZE="10">円<BR>
33獲得ポイント：<INPUT TYPE="TEXT" NAME="txt05" SIZE="10">円<BR>
34<INPUT TYPE="button" VALUE="計算" onClick="calc()">   
35</FORM>
36</BODY>
37</HTML>
38<!-- End your code here -->
39</body>
40</html>

試したこと

liveweaveでのプレビュー
色々なjavascriptのサイトの閲覧
書店での書籍閲覧

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2021/06/10 02:56

コードがマークダウンの枠に入っていません。 ```言語名コード ```

kakedashi_java

2021/06/10 03:00

失礼しました。投稿内容を編集します。ご指摘いただきありがとうございます。

K_3578

2021/06/10 03:02 編集

ソースコードはMarkDownのcode機能で囲んでください。現在下記のようになっていると思いますが ```JavaScript ソースコード ``` <!DOCTYPE html> <html> <head> 以下略 ```(バッククォート)で囲われている中にソースコードは入れます。 ```JavaScript <!DOCTYPE html> <html> <head> 以下略 ``` 例書いてたら指摘被った

kakedashi_java

2021/06/10 03:05

ありがとうございます。マークダウンの枠をわかっておらず、大変失礼しました。

K_3578

2021/06/10 03:55 編集

※回答とかを見てのコメント因みにですが、括弧の数が合ってないのを分かるようにするにはしっかりインデントすることが効果的です。どういうエディタでやっているかは知りませんが、インデントを自動でやってくれる機能などもあるのでケアレスミスで悩まないようにする対策の一つにはなるかと

kakedashi_java

2021/06/10 04:02

ありがとうございます！一旦liveweaveで作成→Microsoftのツールをインストールしてみた次第ですが、ご指摘の通り、カッコの数とスペースは対応する機能を持つエディタで防止できる気がしてきました。今回のケースは、そもそものJavascriptの根本的な理解不足が原因でしたが、せっかくコードを組んで動作しなかった時に絶望感は体験できましたので、早い段階で使うエディタを決定しておきたいと思います。本日初めて質問しましたが、プログラミング界隈の皆さんの優しさに驚いております。有益な回答が一瞬で集まり・・・。本当に感謝しております。ご回答いただいた皆様には手を合わせ、感謝しております笑良い1日をお過ごしください！

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

回答3件

ベストアンサー

JavaScript には「文」と「式」が存在し、区別しなくてはなりません。

ifは「文」なので、「式」として書くことはできません。

if 文は、...

if...else - JavaScript | MDN

ですので、以下は、代入「式」に「文」を入れようとしているので、文法として間違っています。

js
1document.form01.txt05.value = if (datA + datB + datC) <= 5000) {

なお、JavaScriptを学ぶのであれば、開発者ツールのコンソールのエラーメッセージには注意を払った方がいいです。
何のことかわからないようでしたら、ググって、学んでください。

参考：

一方、if文などは文であり式にはなれません。

式ではないため、if文を変数へ代入することはできません。次のようなコードは構文として問題があるため、構文エラー（SyntaxError）となります。
文と式 · JavaScript Primer #jsprimer

投稿2021/06/10 03:07

編集2021/06/10 03:08

Lhankor_Mhy

総合スコア36115

kakedashi_java

2021/06/10 03:13

早速のご回答ありがとうございます。「式に文を入れようとしている」動かない理由はまさにこれだと思います。一つ一つの式を作成するのがまだまだ大変なので、完成形を急いでしまいますが、おそらくプログラミング時にはコンソールメッセージの表示は基本動作であると理解しました。今後そのように作成します。ありがとうございます。

Lhankor_Mhy

2021/06/10 03:20

三項演算子を使うといいかもしれないです。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

kakedashi_java

2021/06/10 03:25

先ほど貼っていただいたこのサイトを見て、これまで私が見ていたどのサイトより非常に充実してわかりやすいです。・コードが動作しない明確な理由をご教示いただいたこと・このサイトをご教示いただいたこと・目的達成のために使用できそうな関数をご教示いただいたことこちらで再度編集できそうです。止まっていた作業が動かせるようになりました。希望が見えてきました。本当にありがとうございました。

Lhankor_Mhy

2021/06/10 03:31 編集

それは良かったです。学習のためのおすすめのサイトは、 https://jsprimer.net/ https://ja.javascript.info/ リファレンスとしてのおすすめは、 https://developer.mozilla.org/ja/docs/Web/JavaScript です。

kakedashi_java

2021/06/10 03:39

ありがとうございます！本当に感謝しかないです。いろいろな書籍やサイトで、if/else文の例を見ても、私の求めているものが事例が出てこない時点でどこか違和感を感じていたら、かなり根本的な話だったんですね。ここでご回答いただけなかったら永遠に考え続け、おそらく諦めていたと思います。学習サイトも拝見し、立ち戻って原則を理解しながら進めたいと思います。僕からしたらまさに救世主です。本当にありがとうございました。

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

document.form01.txt05.value = if (datA + datB + datC) <= 5000){

　(datA + datB + datC) * 0.15;}

カッコの数があってませんよ
文法的にもおかしなよかん。。。

投稿2021/06/10 03:08

編集2021/06/10 03:10

y_waiwai

総合スコア87774

kakedashi_java

2021/06/10 03:15

ご回答くださりありがとうございます。確かに・・・。大変失礼しました。文法が間違っているとのことで先ほどもご指摘受けました。まず式と文を理解しておりませんでした。道のりは遠いですが、ありがとうございます。

y_waiwai

2021/06/10 03:49

みなさん最初は通る道、ですねカッコの数が合わない、ってのと、コードの中に全角空白がまじってるってのは、初心者の方がよく引っかかるところです。あってるはずなのになぜかエラーになるって時には、ここらへんを見直してみてください

kakedashi_java

2021/06/10 03:53

ありがとうございます！昨日書籍を見てみると、コード例にスペースが半角で明示されていて、あれこれマジか・・・となりました。今のところ、感動するほど面白いのでこの情熱が冷めないうちに、たくさんスキルを身につけたいと思います。

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

うおーーー！！！！！動きました！！！！！
・Lhankor_Mhyさんがご提示してくださった条件（三項)演算子を使用し
・y_waiwaiさん、K_3578さんのおっしゃったようにカッコの数を直し
たら動きました！！！！！
めっちゃ嬉しいです、みなさまありがとうございました！！！！！

<!DOCTYPE html> <html> <head> <title>HTML, CSS and JavaScript demo</title> </head> <body>  <HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function calc() { var datA,datB,datC; datA = eval(document.form01.txt01.value); datB = eval(document.form01.txt02.value); datC = eval(document.form01.txt03.value); document.form01.txt04.value = (datA + datB + datC); document.form01.txt05.value = ((datA + datB + datC) <= 5000) ? ((datA + datB + datC) * 0.15) : ((datA + datB + datC) <= 10000)? ((datA + datB + datC) * 0.25 - 555) : ((datA + datB + datC) * 0.35 - 999) } </SCRIPT> </HEAD> <BODY> <FORM NAME="form01"> インプット項目A：<INPUT TYPE="TEXT" NAME="txt01" SIZE="10">円<BR> インプット項目B：<INPUT TYPE="TEXT" NAME="txt02" SIZE="10">円<BR> インプット項目C：<INPUT TYPE="TEXT" NAME="txt03" SIZE="10">円<BR> 合計： <INPUT TYPE="TEXT" NAME="txt04" SIZE="10">円<BR> 獲得ポイント：<INPUT TYPE="TEXT" NAME="txt05" SIZE="10">円<BR> <INPUT TYPE="button" VALUE="計算" onClick="calc()"> </FORM> </BODY> </HTML>  </body> </html>

投稿2021/06/10 04:32

kakedashi_java

総合スコア3