テキストボックスに入れた値を取得できない

前提・実現したいこと

htmlとjavascript で２つのタイマーを作りたい
片方のタイマーが終わったら、もう片方のタイマーが起動するタイマーです

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

cnt_start() 関数でcounter1のテキストボックスに入っている値を取得できず、
入っている値をwindow.alertで表示してもundifinedとなる

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3
4
5<head>
6    <meta charset="utf-8">
7    <link rel="stylesheet" type="text/css" href="style.css">
8    <title>
9        タイマー
10    </title>
11</head>
12
13<body>
14    <h2>
15        <center>タイマー</center>
16    </h2>
17    <hr>
18    <form name="timer" onSubmit="return false;">
19
20        <div class="form_conf">
21            <form></form>
22            <form id="timer1">
23                <font size="5">
24                    タイマー１
25                </font>
26            </form>
27            <form id="timer2">
28                <font size="5">
29                    タイマー２
30                </font>
31            </form>
32
33        </div>
34
35        <br>
36
37        <div class="form_conf">
38            <form>
39
40                <input type="text" name="counter1" size="10">
41                <input type="button" size="10" value="25分" onClick="set_timer1(25)">
42
43            </form>
44            <form>
45
46                <input type="text" name="counter2" size="10">
47                <input type="button" size="10" value="５分" onClick="set_timer2(5)">
48
49            </form>
50        </div>
51        <br>
52
53
54        <div class="form_conf">
55            <form>
56                <input type="button" name="b_start" size="10" value="開始" onClick="cnt_start()">
57            </form>
58            <form>
59                <input type="button" name="b_reset" size="10" value="タイマーリセット" onClick="cnt_reset()">
60            </form>
61            <form>
62                <input type="button" name="b_clear" size="10" value="クリア" onClick="cnt_clear()">
63            </form>
64        </div>
65    </form>
66
67
68
69
70
71
72
73
74
75
76
77
78    <script language="javascript" type="text/javascript">
79
80        var flag = true;
81        var stop_flag = 1;
82        var first_value;
83        var tm, ts;
84        var result;
85
86
87        /*一時停止(使ってない)
88        function cnt_stop() {
89            if (stop_flag == 1) {
90                clearInterval(timerID);
91                document.timer.b_start.disabled = false;
92                stop_cnt1 = tm * 60 + ts;
93                cnt1 = tm * 60 + ts;
94                window.alert("タイマー１が終わりました" + cnt1);
95            }
96            else if (stop_flag == 0) {
97                stop_flag = 1;
98            }
99        }*/
100
101        //タイマー１に時間セット
102        function set_timer1(num1) {
103            if (timerID > 0) {
104                cnt_resethojo();
105            }
106            document.timer.counter1.value = num1;
107        }
108        //タイマー２に時間セット
109        function set_timer2(num2) {
110            if (timerID > 0) {
111                cnt_resethojo();
112            }
113
114            document.timer.counter2.value = num2;
115        }
116        //タイマーの時間経過のフォーマット
117        function cnt_format(num) {
118            tm = Math.floor(num / 60);
119            ts = num % 60;
120            if (ts < 10) {
121                ts = "0" + ts;
122            }
123            return (tm + ":" + ts)
124        }
125
126
127        //タイマー１のスタート
128        function cnt_start() {
129
130            cnt1 = document.getElementsByName("counter1").value;
131            first_value = cnt1;
132            window.alert(cnt1);
133            if (!cnt1) {
134                return 0;
135
136            }
137            else {
138                document.getElementsByName("b_start").disabled = true;
139                timerID = setInterval('countdown()', 1000);
140            }
141        }
142        //タイマー１のカウントダウン
143        function countdown() {
144            cnt1--;
145            document.getElementsByName("counter1").value = cnt_format(cnt1);
146            if (cnt1 < 0) {
147                window.alert("タイマー１が終わりました" + stop_flag);
148                cnt_reset();
149                flag = false;
150                cnt_start2();
151            }
152        }
153
154
155        //タイマー２のスタート
156        function cnt_start2() {
157            cnt2 = document.timer.counter2.value;
158            first_value = cnt2;
159
160            if (!cnt2) {
161                return 0;
162            }
163            else {
164                document.timer.b_start.disabled = true;
165                timerID = setInterval('countdown2()', 1000);
166            }
167        }
168
169
170        //タイマー２のカウントダウン
171        function countdown2() {
172            cnt2--;
173            document.timer.counter2.value = cnt_format(cnt2);
174            if (cnt2 < 0) {
175
176                window.alert("タイマー２が終わりました" + stop_flag);
177
178                cnt_reset();
179                flag = true;
180            }
181        }
182        //タイマーのリセット
183        function cnt_reset() {
184            clearInterval(timerID);
185            timer_reset();
186        }
187
188        function timer_reset() {
189            timerID = 0;
190            if (flag == true) {
191                document.timer.counter1.value = first_value;
192            }
193            if (flag == false) {
194                document.timer.counter2.value = first_value;
195            }
196            document.timer.b_start.disabled = false;
197        }
198
199        function cnt_resethojo() {
200            clearInterval(timerID);
201            timerID = 0;
202            document.timer.b_start.disabled = false;
203        }
204
205        function cnt_clear() {
206            clearInterval(timerID);
207            timer_reset();
208            document.timer.counter1.value = null;
209            document.timer.counter2.value = null;
210
211        }
212
213
214    </script>
215
216</body>
217
218
219</html>

試したこと

テキストボックスの値を取得するときにgetElementsByNameと
document.timer1.counter1.valueでやってもダメでした

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

Chromeで実行しています

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

回答1件

ベストアンサー

getElementsByNameは複数の値に対応しているため、一つしかなくてもNodeListを返します。
慣れないうちは必要なHTML要素にid属性を指定するようにするほうが簡単だと思います。

js
1document.getElementsByName("counter1")[0].value // こうすればアクセスできませんか？

【Document.getElementsByName() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByName

【getElementByIdとgetElementsByNameの違い - hogehoge foobar Blog Style Beta】
http://mrgoofy.hatenablog.com/entry/20100928/1285684451

投稿2019/12/22 15:37

kei344

総合スコア69596

otaaa

2019/12/22 16:38

丁寧にご回答していただきありがとうございます。回答して頂いた通りにしたらできるようになりました。ありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

テキストボックスに入れた値を取得できない

前提・実現したいこと

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

該当のソースコード

試したこと

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

関連した質問