Q&A
ご丁寧にありがとうございます。
JavaScriptのまったくの初心者で、基礎的な質問につき恐縮です。
計算！！のボタンを押しても、計算結果が表示されません。
クリアは反応するのですが、どうしたらいいのか。
ご教授お願い致します。
html
1<html> 2<head> 3<meta http-equiv="Content-script-Type" content="text/javascript"> 4<meta http-equiv="Content-Style-Type" content="text/css"> 5<script type="text/javascript"> 6function calc(cl){cl.z.valu = eval(cl.x.value)+eval(cl.y.value)} 7</script> 8</head> 9<body> 10＊フォームに入力された文字列を計算できるようにする 11 <form name = 'calc'> 12 <input type = "text" name="x" value="0" size="10"> 13 + 14 <input type = "text" name="x" value="0" size="10"> 15 = 16 <input type = "text" name="z" value="0" size="10"> 17 <input type="button" value="計算！！" onclick = "calc(this.form)"> 18 <input type="reset" value="clear"> 19 </form> 20 21 22</body> 23</html>
回答2件
0
ベストアンサー
formやその配下の要素がもつ、nameやidと同じ名前で関数を定義した場合、その関数は実行されないようです。
https://qiita.com/nekoneko-wanwan/items/b8b1e2a5bb0a438bb3b4
eval を使うのはやめましょう。文字列を数値に変換するには parseInt() が利用できます。
<form name = 'calc'>
HTMLの属性の値にはダブルクォートを使って囲むことが推奨されています。言語仕様上シングルクォートでも間違ってはいませんが、ダブルクォートに統一することをおすすめします。
html
1 <input type = "text" name="x" value="0" size="10"> 2 + 3 <input type = "text" name="x" value="0" size="10">
2つ目の input の name 属性には、y が入るのではないですか？
DOCTYPE宣言をしましょう。HTML5においてはContent-Script-TypeやContent-Style-Typeの指定は不要になりました (JavaScript/CSSがデファクトスタンダードのため)
最終的には、こうなるかと思います
html
1<!doctype html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>test</title> 6 <script> 7 function calc(cl) { 8 cl.z.value = parseInt(cl.x.value, 10) + parseInt(cl.y.value, 10); 9 } 10 </script> 11</head> 12<body> 13 <p>＊フォームに入力された文字列を計算できるようにする</p> 14 <form name="calc_form"> 15 <input type="text" name="x" value="0" size="10">+ 16 <input type="text" name="y" value="0" size="10">= 17 <input type="text" name="z" value="0" size="10"> 18 <input type="button" value="計算！！" onclick="calc(this.form);"> 19 <input type="reset" value="clear"> 20 </form> 21</body> 22</html>
追記 Aug 13, 2019 20:28
parseInt(cl.x.value, 10) + parseInt(cl.y.value) を parseInt(cl.x.value, 10) + parseInt(cl.y.value, 10) に修正
投稿2019/08/13 11:13
編集2019/08/13 11:28
総合スコア2982
0
Uncaught TypeError: calc is not a function
というエラーが出ていました。
関数名をcalcからcalc2に変更すれば動きました。
<form name = 'calc'>のcalcと名前が衝突していることが原因でしょう。
投稿2019/08/13 11:07
総合スコア777
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。