• ベストアンサー

JavaScriptで簡単な計算機を作りたいのですが…

初めて質問させていただきます。タイトルどおり、以下の様なコードを組んだのですが答えが表示されません。なにぶんJavaScriptを勉強し始めて数日の初心者なもので、どこが悪いのか見当がつきません。レベルの低い質問で申し訳ないのですが、皆さんのお知恵をお貸しください。 <html> <head> <title>JAVAscript</title> <SCRIPT LANGUAGE="JavaScript"> <!-- function func(){ a=parseInt(document.masu.0.value); b=parseInt(document.masu.1.value); c=a+b; document.masu.2.value=c; //--> </SCRIPT> </head> <body> <form name="masu"> <input type="text" name="0" SIZE=10 onkeyup="chkNum(this)"> <input type="text" name="1" SIZE=10 onkeyup="chkNum(this)"> <input type="text" name="2" SIZE=10"onkeyup="chkNum(this)"> <input type="button" value="計算" onclick="func()"> </form> </body> </html>

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- 動作不良の原因じゃないけど,DOCTYPE宣言はきちんと書こう--> <head> <title>Q3530428 TestCase 2</title> <!-- 以下のような書き方が推奨される script要素内をコメントアウトしてないのも個人的なポリシー。 できれば外部のファイルにまとめよう! --> <script type="text/javascript"> function func(){ /* うーん,まぁいいんだけど,個人的に元の書き方好きじゃないんだよね・・・ 以下3行を追加。 */ var val0 = document.getElementById("val0"); var val1 = document.getElementById("val1"); var val2 = document.getElementById("val2"); var a; var b; var c; a=parseInt(val0.value); b=parseInt(val1.value); /* とりあえずval0.valueやval1.valueが整数と解釈できる文字列でなかったとき エラーだけど,何もしない。 */ c=a+b; val2.value=c; } /* 元のソースでは閉じてなかったよ */ function chkNum(obj){ /* 何もしないけど,エラー出るのが気持ち悪いので一応 */ } </script> </head> <body> <!-- XHTML 1.0 StrictやHTML 4.01 Strictでは bodyの直下にinputは置けない。 form要素はブロックレベルだからその下にはおけるけど, どこかに送信するわけでもないのに,action="#"とかして form要素を使用するのが嫌いなので,削除。 よく見るコードなのが悲しい。 属性名を小文字に統一。(HTML 4.01では許容) SIZE→size 属性値リテラルを必ず引用符で括る! size=10 → size="10" 厳密にはHTML 4.01には括らなくてもいいときもあるが,例外規則覚えるのが大変なので。 name属性でなくid属性を使おう!(っていうか俺が掲示したコードではid属性でしか動かない) input要素は内容モデルがEMPTYなので XHTML 1.0では />が必要。HTML 4.01では書いてはいけない で,今回の失敗の最大の原因。 nameやid属性は0とか1とか最初に来られなかったと思う。 --> <p> <input type="text" id="val0" size="10" onkeyup="chkNum(this);" /> <input type="text" id="val1" size="10" onkeyup="chkNum(this);" /> <input type="text" id="val2" size="10" onkeyup="chkNum(this);" /> <input type="button" value="計算" onclick="func();" /> </p> <!-- くそー。サンプルソース書いてて回答に遅れを取った。 他にもアドバイスがあるし折角書いたのを捨てるのが悔しいのでそのままポスト。 --> </body> </html>

aioi1987
質問者

お礼

親切なサンプルありがとうございます! ためになるアドバイスもいただけてうれしいです。 サンプルを参考に勉強しなおします。 次回質問した際にもよろしくお願いします。

その他の回答 (1)

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

名前が数字で始まっているから。 0 1 2 じゃなく a b c になおしてごらん

aioi1987
質問者

お礼

すばやい回答ありがとうございます! おっしゃるとおりでした。 質問する前によく勉強したつもりでしたが、まだまだでした↓↓ また質問した際にはよろしくお願いします。