textフォームへの文字の表示でエラー

###前提・実現したいこと
javascriptで押した番号の数だけ足し算をしていき結果をtextフォームに表示するプログラムを作ろうとしています。
テキストフォームへの表示がうまくいかず悩んでいます。

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

index.html:17 Uncaught TypeError: Cannot read property 'txtb' of undefined
    at input (http://127.0.0.1:55110/index.html:17:28)
    at HTMLInputElement.onclick (http://127.0.0.1:55110/index.html:28:59)

###該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <title>Document</title>
7    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
8    <script>
9        myTotal = 0;
10        myInput = "";
11        myCalc = "+";
12        myFlg = 1;
13
14        function input(myData) {
15            myTotal += myData;
16            console.log(myTotal);
17            document.keisan.txtb.value = "";
18        };
19    </script>
20</head>
21
22<body>
23    <form action="keisan">
24        <input type="button" value="1" onClick="input(1)">
25        <input type="button" value="2" onClick="input(2)">
26        <input type="button" value="3" onClick="input(3)">
27        <input type="button" value="4" onClick="input(4)">
28        <input type="button" value="5" onClick="input(5)">
29        <input type="button" value="6" onClick="input(6)">
30        <input type="button" value="7" onClick="input(7)">
31        <input type="button" value="8" onClick="input(8)">
32        <input type="button" value="9" onClick="input(9)">
33        <input type="button" value="0" onClick="input(0)">
34        <input type="button" onClick="output()" value="answer">
35        <input type="text" name="txtb" value="hogehoge"> </form>
36</body>
37
38</html>

###試したこと
document.keisan.txtb.valueのところを他の名前などに変えたりしてみました。

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

回答1件

ベストアンサー

formの属性を<form action ="keisan">としているところを<form name="keisan">にすれば動くと思いますよ。以下、修正したコードです。

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <title>Document</title>
7    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
8    <script>
9        myTotal = 0;
10        myInput = "";
11        myCalc = "+";
12        myFlg = 1;
13
14        function input(myData) {
15            myTotal += myData;
16            console.log(myTotal);
17            document.keisan.elements['txtb'].value = myTotal;
18        };
19    </script>
20</head>
21
22<body>
23    <form name="keisan">
24        <input type="button" value="1" onClick="input(1)">
25        <input type="button" value="2" onClick="input(2)">
26        <input type="button" value="3" onClick="input(3)">
27        <input type="button" value="4" onClick="input(4)">
28        <input type="button" value="5" onClick="input(5)">
29        <input type="button" value="6" onClick="input(6)">
30        <input type="button" value="7" onClick="input(7)">
31        <input type="button" value="8" onClick="input(8)">
32        <input type="button" value="9" onClick="input(9)">
33        <input type="button" value="0" onClick="input(0)">
34        <input type="button" onClick="output()" value="answer">
35        <input type="text" name="txtb" value="hogehoge"> </form>
36</body>
37
38</html>