Q&A
ほんとでした(-_-;)
ありがとうございます！
前提・実現したいこと
テキストボックスに文字を入力しボタンを押すと、
入力した文字が2秒ごとに先頭から1文字ずつ順番に表示されるプログラムを作成したいです。
発生している問題・エラーメッセージ
★for文 のところで【parsing error unexpected token】 とエラーが出ているのですが、どこが間違えているのかが分かりません。 また、プロパティなどあまりまだ慣れておらず、 こんな使い方はしない、というものもあるかと思いますので、ぜひ教えていただけると嬉しいです。
該当のソースコード
javascript
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>課題</title> 6 <script> 7 var add = document.getElementById("add"); 8 9 function showing_pg() { 10 var text = document.getElementById("text.value"); 11 ★for (var i = 0, i < text.length, i++) { 12 var result = text.substring(i); 13 add.innerHTML = result; 14 } 15 } 16 window.onload = function() { 17 var count_time = setInterval(showing_pg,2000); 18 count_time.addEventListener("click", count_time, false); 19 } 20 21 </script> 22 </head> 23 <body> 24 <input type="text" name="text" id="text"> 25 <button id="button">一文字ずつ表示</button> 26 <div id="show"></div> 27 </body> 28</html> 29
補足情報（FW/ツールのバージョンなど）
エディタはcloud9を使用しています。
回答2件
0
ベストアンサー
javascript
1 ★for (var i = 0, i < text.length, i++) {
2つある , を ; にしてください。
ついでですが、
javascript
1 var text = document.getElementById("text.value");
これだと、text は文字列ではなく null になると思います。HTML 中に id="text.value"を持つ要素がないので。
欲しい物は document.getElementById("text").value ではないでしょうか。
「1文字づつ表示」にもなってないですね。
js
1 var count_time = setInterval(showing_pg,2000); 2 count_time.addEventListener("click", count_time, false);
addEventListener()を呼びたい対象はボタンのはずです。setInterval()から得たタイマーIDはaddEventLisetner()という関数を持ちません。
addEventListener()に渡すのは実行したい関数です。setInterval()から得たタイマーIDを渡してはいけません。
まず、グローバルに countTimer と shownLength という変数を宣言しましょう。
「ボタンを押すと、…2秒ごとに先頭から…」という仕様を以下のようなコードで実現します。
js
1document.getElementById("button").addEventListener("click", () => { 2 // 2秒ことに 3 countTimer = setInterval(showing_pg, 2000); 4 // 次は先頭から1文字だけ表示する 5 shownLength = 1; 6}, false);
showing_pg()でやることは、「入力した文字列のうち、先頭 shownLength 文字だけ表示する」「showLength を1増やす」「showLength が text.length を超えたら、繰り返しタイマーを停止する」です。for は不要です。
async/awaitを使った同期的な書き方や、bind()とsetTimeout()を使ったグローバル変数なしの書き方もありますが、初学者向けではないので省略します。
投稿2021/03/10 02:20
編集2021/03/11 00:50
総合スコア21679
0
色々違う気がするのだけども、他の人も突っ込んでくれると思うので一つだけ。
script
1var add = document.getElementById("add");
id="add"は見当たらないので、showにした方が良いかなと思う。
投稿2021/03/10 03:41
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/03/10 23:08
2021/03/11 00:17
2021/03/11 12:01