質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1439閲覧

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

otaaa

総合スコア19

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/12/22 15:30

前提・実現したいこと

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

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

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 タイマー1 25 </font> 26 </form> 27 <form id="timer2"> 28 <font size="5"> 29 タイマー2 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="5分" 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("タイマー1が終わりました" + cnt1); 95 } 96 else if (stop_flag == 0) { 97 stop_flag = 1; 98 } 99 }*/ 100 101 //タイマー1に時間セット 102 function set_timer1(num1) { 103 if (timerID > 0) { 104 cnt_resethojo(); 105 } 106 document.timer.counter1.value = num1; 107 } 108 //タイマー2に時間セット 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 //タイマー1のスタート 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 //タイマー1のカウントダウン 143 function countdown() { 144 cnt1--; 145 document.getElementsByName("counter1").value = cnt_format(cnt1); 146 if (cnt1 < 0) { 147 window.alert("タイマー1が終わりました" + stop_flag); 148 cnt_reset(); 149 flag = false; 150 cnt_start2(); 151 } 152 } 153 154 155 //タイマー2のスタート 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 //タイマー2のカウントダウン 171 function countdown2() { 172 cnt2--; 173 document.timer.counter2.value = cnt_format(cnt2); 174 if (cnt2 < 0) { 175 176 window.alert("タイマー2が終わりました" + 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で実行しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

otaaa

2019/12/22 16:38

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問