２つの入力した数値から和差積商の答えを出すプログラムを作りたい

前提・実現したいこと

JavaScriptで、２つの数値を入力して和差積商の結果を出すプログラムを作っています。
積と商の結果は普通に出るのですが、和と差だけ以下のエラーメッセージが発生しました。

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

NaN（学校のサイト内でのアラートで表示されます）

該当のソースコード

alert(`和${a+b}差${a-b}`);

試したこと

括弧を変えてみたり、$を+に変えてみたりした

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

和と差の結果だけでない理由が知りたいです。
学校の課題で取り組んでおります。

###コード全体

var a=parseInt(prompt("1つ目の数を入力せよ"));

var b=parseInt(prompt("2つ目の数を入力せよ"));

alert(和${a+b}:差${a-b});

alert(積${a*b}:商${a/b});

</script> </body> </html> ###ソースコード(個人情報は伏せてます。) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> <meta http-equiv="Cache-Control" content="no-cache"> <script language="javascript"> <!-- function DispKakunin(){ var form = document.forms[0], submitbox = form.getElementsByTagName('input')[3], submitdata = form.getElementsByTagName('a')[0];

if (window.confirm('データを送信しますか？')) {
return true; //OKボタン
} else {
return false; //キャンセルボタン
}
}
// -->
</script>

<STYLE type="text/css">  </STYLE> <title>実習課題ポートフォリオ</title> </head> <body bgcolor="#ffffff" text="#000000"> <div align=center> <table CELLSPACING=0 CELLPADDING=0 border=0 bordercolor=#FFCC99> <tr><td width=10 BGCOLOR=#FFCC99><br></td><td BGCOLOR=#FFCC99><br></td><td width=10 BGCOLOR=#FFFFFF><br></td></tr> <tr><td width=10 BGCOLOR=#FFCC99><br></td> <td BGCOLOR=#FFCC99>  <form method="post" enctype="multipart/form-data" action="./pf.cgi"> <input type=hidden name=uid value=> <input type=hidden name=pass value=20011115>  <blockquote><font size=+1><b>実習課題ポートフォリオ</b></font> <div align="right"> <input type=button name=fnc_list value="課題提出状況一覧へ" onclick="submit();"></div>  <p><table border=0 cellspacing=2 cellpadding=4> <tr><td bgcolor=white colspan=2> 入力した内容をよく確認して「送信」ボタンをクリックしてください。「課題提出」にチェックをつけずに送信すると，一時保存となります。提出後「再」の評価になった場合はすみやかに修正して再度課題提出してください。万一，提出後に内容を訂正したい場合は，情報科へ連絡してください。<br> <br> </td></tr><tr><td colspan=2><br></td></tr> <tr><td bgcolor=#cccccc width=30%><font size="4"><B>■実習課題</B></font></td> <td bgcolor=#cccccc><B>第２回レポート課題最終更新：2019 09/18 20:35 </B></td></tr> <td>□プログラム</td> " target="_blank">.html </a><br><B>※以下の欄にHTMLを入力してください。JavaScript以外の言語で記述されている場合，またインターネット上に公開されているプログラムをコピーしている場合，内容を問わず再提出となります。 ```JavaScript </b><br><textarea NAME=q01 wrap=soft rows=16 cols=80 ><html>
<body>
<script>


var a=parseInt(prompt("1つ目の数を入力せよ"));


var b=parseInt(prompt("2つ目の数を入力せよ"));

alert(`和${a+b}:差${a-b}`);


alert(`積${a*b}:商${a/b}`);

</script>
</body>
</html> </textarea></td></tr> ``` <tr><td></td><td align=right><input type=checkbox name=temp value=1>課題提出（提出後は修正できません）<BR><input type=hidden name=page value=2> <INPUT TYPE=submit name=regist VALUE="送信" onClick="return DispKakunin();" ></td></tr><tr><td valign=top align=right>＜添削履歴＞</td><td><textarea NAME=a2 wrap=soft rows=6 cols=80 style=background-color:#FF9999; readonly>（先生からのコメント）</textarea><br></td></tr> </table> <br><br><div align=right>(C)</div></blockquote> </td> <td width=10 BGCOLOR=#CCCCCC><br></td></tr> <tr> <td width=10 height=10 BGCOLOR=#FFFFFF></td> <td height=10 BGCOLOR=#CCCCCC><br></td> <td width=10 height=10 BGCOLOR=#CCCCCC><br></td> </tr> </table></div> </body> </html>

Lhankor_Mhy

2019/09/17 06:13

数字を全角で入力している、ということはありませんか？

miyabi_pudding

2019/09/17 06:14

aとbを定義している構文含めた、コード全体を記載してください。 NaNエラーは、対象の変数が"数値ではない"ということを示すものです。なので、aないしbが数値を格納できていない可能性があります。

user001

2019/09/17 06:51

コード全体を追記しました。

kei344

2019/09/17 06:55

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

miyabi_pudding

2019/09/18 01:17 編集

kei344さんの修正依頼と併せて、もう一つ確認です。実際に表示されたアラートには、なんと表示されていますか？ ---- 下記は、kei344さんの修正依頼にて解決すると判断できるので無視して大丈夫です ---- また、下のコード内では、バッククォートがついておらず、テンプレートリテラルになっていませんが、実構文では、バッククォートついていますか？？というのも、バッククォートがしっかりとついている状態の構文では、問題なく動くので（Google Chromeで検証）構文での間違いがあるとするなら、そこしか浮かびません。

Lhankor_Mhy

2019/09/17 07:26 編集

> miyabi_takatsukさん > 下のコード内では、バッククォートがついておらず、テンプレートリテラルになっていませんたぶん、markdownのいたずらかと。 > user001さん追記拝読。やはり、入力値異常としか思えないです。

user001

2019/09/17 07:26

miyabi_takatsukさん実際に表示した際も「NaN」と表示されます。

miyabi_pudding

2019/09/17 07:26

Lhankor_Mhyさん> ですね、コメントした後で気づきました。

miyabi_pudding

2019/09/17 07:32 編集

user001さん> なんどもすみません。アラートは4回出てくると思いますが、どのタイミングで、どうNaNとでますか？後半の二回ですか？また、質問の構文では、”NaN”とだけ出ることはありえません。 ”和NaN:差NaN”とは出る可能性があります。

user001

2019/09/17 07:41

miyabi_takatsukさんプログラミングの課題でJavaScriptを入力して出力するサイトを使っています。アラートは2回に分けて作っており、NaNとだけ表示されるのは前半の方です。（和と差）後半の積と商の部分は普通に算出されます。例:a[10]b[5]なら前半[NaN]後半[積50,商2]

Lhankor_Mhy

2019/09/17 07:51 編集

> user001さんそのコードでそんなアラートの出力はありえないと思いますが…… なんだか、全てのコメントを無視されているのでちょっと不愉快。なにか癇に障ることを書いたかな？まあいいや。

miyabi_pudding

2019/09/17 07:46

user001さん> サイトを使っているのなら、その情報は、問題解決する上で、かなり重要です。なんのサイトを使っているのか、そのサイト名、URLを質問本文に記載してください。なぜなら、ブラウザの仕様とは大きく違う可能性があるからです。現在の質問本文からは、ブラウザでそう表示されるとしか捉えられません。情報認識の相違があっては、問題解決なんてしようがありませんし、的を射た回答なんて絶対得られません。

user001

2019/09/17 07:58

Lhankor_Mhyさんすみません。そんなつもりではなかったのですが…

Lhankor_Mhy

2019/09/17 08:35

> user001さんそうでしたか、失礼しました。気分を害されているのかと思っていましたのでほっとしました。繰り返しになりますが、そのコードからはその出力はありえないと思います。ご提示いただいていない部分に原因があるのだと思います。

user001

2019/09/17 09:46

返信が遅れてしまいすみません。ブラウザはWindows10（自宅のパソコン）で、サイトの方は学校のホームページ（生徒のみ入れるサイト）ですので教えることができません。学校のパソコンのブラウザはGoogle Chromeです。

miyabi_pudding

2019/09/18 01:02 編集

ふむ・・・。そのサイトが何ものかわからない以上、正確な回答にならないと思いますが、回答させていただきます。また、学校のサイトを使っていて、そのサイトで表示されるアラートにて出てくるとも質問本文に記載ください。質問本文は修正できます。また、コードがまだしっかりマークダウン方式で記載仕切っていないので、 PCで閲覧されているなら、プレビューを見ながら、質問文を修正しましょう。

Zuishin

2019/09/18 02:35

多分、この質問に貼られたコードと学校のコードが異なっていますから、このコードをもとに頭をひねっても答えが出ないのではないかと思います。該当するページを Chrome で開き、F12 を押して Sources タブを開き、Ctrl+P を押すとソースを見ることができます。それをそのまま質問にコピペする方が解決が早いと思います。

user001

2019/09/18 11:57

ソースコードに個人情報が入っていてその部分だけ伏せたいのですが、それではだめでしょうか？

Zuishin

2019/09/18 12:06

いいと思いますよ。ただ、プログラムに影響が出ないようにしてください。コードを貼り付ける時には、 ```JavaScript コード ``` のように、```JavaScript と ``` の間に入れてください。改行も忘れずに。この記号は <code> ボタンを押すと出てきます。

user001

2019/09/18 12:46

載せましたがこれで大丈夫でしょうか？

Zuishin

2019/09/18 13:06

```JavaScript は ``html の間違いです。 ```html <html> </html> ``` のように、一部だけではなく全体を囲ってください。

Zuishin

2019/09/18 13:10

というかこれは、元々の質問のものと全然違いますね。それと > ※以下の欄にHTMLを入力してください。JavaScript以外の言語で記述されている場合，またインターネット上に公開されているプログラムをコピーしている場合，内容を問わず再提出となります。と書いてあります。ネット上に公開されているプログラムをコピーするなということは、人に聞いてもいけないということです。

user001

2019/09/18 13:22

すみません。自分の力不足が故に聞いてしまったのですが、人に聞いても行けなかったのですね。これからは気をつけます。

miyabi_pudding

2019/09/19 00:58

Zuishinさん、大変にありがとうございます。質問者さん、課題は、あらゆる面、問題発生時の解決も全て含めて"課題"なので、今回の場合は特に人に聞いてはいけなかったようですね。また、元のソースコードも違ったようですし・・・。一つまた可能性になってしまいますが、課題提出のtextarea内に、エスケープされてわかりづらいですが、 <html>が含まれているようです。純粋にJavaScriptのみを記載する課題なのかな？と推察されます。課題文もかなりわかりずらい面もあるようですね・・・。 HTMLを記載しろと言っているのに、JavaScript以外だと再提出だという矛盾は、課題文自体に問題があるように思います。（HTMLってJavaScriptじゃないし）課題だって面と、課題文の意味合いの確認も含め、学校側に問い合わせすべきでしょう。

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

回答3件

特に問題なさそうですが、「+」は文字列の結合にも使うので若干工夫が必要
あとは入力値次第では？

javascript
1var a=parseInt(prompt("1つ目の数値"));
2var b=parseInt(prompt("2つ目の数値"));
3alert(`和${a+b}:差${a-b}:積${a*b}:商${a/b}`);

投稿2019/09/17 06:19

yambejp

総合スコア118268

自己解決

alert表示だったのをdocument.writeに変えるなどの修正をしたら、正常に動作しました。

投稿2019/09/19 05:18

user001

総合スコア5

yambejp

2019/09/19 05:25

私の提示したソースでは動かないということですね？

user001

2019/09/19 05:48

>alert(`和${a+b}:差${a-b}:積${a*b}:商${a/b}`); はい。このソースの文字列と変数の間を"と,に差し替えたら動作しました。 yambejpさんのソースの方も見ながら修正しましたので、ご提示ありがとうございました。例:("和",(a+b))

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

まず、質問修正依頼にて、多数の方からご指摘ある通り、
質問文のコードでは、通常は、その表示はありえません。
その、学校のサイトを使用してるとの情報から、下記の可能性が導き出されるので、
ご確認ください。

入力が半角数字になっていない。
全角数字でも、変数a、bには、文字列が代入されるので、
計算時にNaNとなります。
ただし、積商の計算が、想定通りの計算がされているとのことであれば、この可能性は限りなく薄いです。
質問本文に含めていない構文がある
質問構文をそのままブラウザにて表示させても、NaNとだけ表示されることはありえませんし、半角数字さえ入力すれば、想定された通りのアラートが表示されます。
よって、質問者さん自身が、これは今回に関係ないだろうとかの理由で、質問本文に記載していない構文がある可能性があります。
その場合に限らず、できる限りそのままのコードで記載お願いします。
（修正依頼コメントにも記載した通り、質問本文は修正が可能です）
問題が起きているコードをそのまま記載することは、正確な回答を得て、問題解決をする第一歩になりますので、どうかくれぐれもよろしくお願いします。
その学校のサイトの計算がおかしい
本件はこの可能性が高いと思われます。
前述通り、積商の計算ができている以上、
そのサイト自体がエラーがあるもので、例えば、
テンプレートリテラル内での数値同士の和差算が正しく処理されない、という可能性です。
この場合、こちらではどうしようもなく、その学校側に問い合わせるしかないでしょう。