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

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

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

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

HTML

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

Q&A

解決済

3回答

1996閲覧

指定のテキストボックスに1文字ずつ表示をさせること

goombeer

総合スコア16

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2017/05/08 08:23

###前提・実現したいこと
指定のテキストボックスに1文字ずつ表示させること。
(イメージとしてはポケモンのセリフように表示させたい)
###該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="css/reset.css"> 6 <link rel="stylesheet" href="css/pokemon.css"> 7 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 8 <title>Pokemon</title> 9 </head> 10 <body> 11 <div class="flame"> 12 <img src="images/flame.jpg" alt="" width="500px;" height="450px"> 13 <audio src="music/voice.wav" id="voice"></audio> 14 <audio src="music/bgm.mp3" id="bgm" loop="loop"></audio> 15 <video src="video/video.mp4" id="video" autoplay width="312px" height="300px;" onclick="opning()"></video> 16 <p id="textbox" value=""></p> 17 </div> 18 19 <script type="text/javascript" src="pokemoscript.js"> 20 </script> 21 </body> 22</html> 23

javascript

1function text1(){ 2 var str = "ようこそ!ポケットモンスターのせかいへ!"; 3 var cnt = document.getElementById('textbox').length; 4 while(cnt == str.length){ 5 var m = str.substr(0 + cnt,1); 6 $('#textbox').append(m); 7 }

###補足情報(言語/FW/ツール等のバージョンなど)
何度も質問をしてしまって、大変申し訳ありません。お力をお貸しいただけるとありがたいです。

html上の<p>タグにセリフを表示させたいと考えています。
そこでjsで関数を組んでいます。具体的には、表示させたいセリフをstrという変数を宣言し、<p>タグに入力されている文字列の長さをcntという変数を宣言しました。
while文を使い、cntとstrが同じになるまで、処理を行います。行う処理としては、宣言した文字列を先頭から切り出して、pタグに追加を行うという処理です。

この関数を実行した時に文字が表示されません。
具体的に実現させたいこととして、
①1文字ずつ表示させたい。
②セリフが全て表示ができた時に、次のセリフを表示させる関数に処理を移行させたい。

何が足りないかわからないことだらけで、大変申し訳ありませんが、厳しいアドバイスでもいいので、ご教授のほどよろしくお願いいたします。

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

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

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

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

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

guest

回答3

0

ベストアンサー

考えられたロジックの通りにコードが書かれていないですね。

while文を使い、cntとstrが同じになるまで、処理を行います。

cntがstrに達するまでループするということはcntとstrが一致したらループを抜けるとういことですよね?

いまのコードは
・while条件が「cntとstrが一致している間ループする」になっている
・cnt の変化タイミングが無い
です。

先ずはそのあたりを見直してみてください。

尚、「1文字ずつ表示させたい」というのを実現するには適当な空白時間が必要になります。
コンピュータの処理はとても速いですから、単純にwhileで走らせると数文字の処理なんて一瞬で終わり思った通りの表示にならないでしょう。
setTimeout などでタイミングを作る処理が必要になるでしょうから、次のステップではそこに挑戦してみてください。

投稿2017/05/08 08:40

takito

総合スコア3111

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

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

goombeer

2017/05/08 09:10

ありがとうございます。 的確なご指摘、感謝申し上げます。 whileではなくforを使用して、実行してみたら表示されたのですが、やはり一瞬で表示されてしまったので、表示速度を落とせないか作業してみたいと思います。
guest

0

こんな感じですか?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function(){ var str = "ようこそ!ポケットモンスターのせかいへ!"; var timerId; $('[type=button][data-speed]').on('click',function(){ var speed=parseFloat($(this).data("speed")); $('#textbox').val(""); if(timerId) clearInterval(timerId); timerId=setInterval(function(){ var len=$('#textbox').val().length; if(str.length==len) clearInterval(timerId); $('#textbox').val(str.substr(0,len+1)); },1000*speed); }); }); </script> <input type="text" id="textbox" size="50"> <input type="button" value="speed1" data-speed="0.05"> <input type="button" value="speed2" data-speed="0.1"> <input type="button" value="speed3" data-speed="0.3">

jQuery排除

jQuery排除版追記しておきます

javascript

1<script> 2document.addEventListener('click',function(e){ 3 var str = "ようこそ!ポケットモンスターのせかいへ!"; 4 var timerId; 5 var t=e.target; 6 var speed; 7 if(t.nodeName=="INPUT" && t.type=="button" && (speed=t.getAttribute("data-speed"))){ 8 var tb=document.getElementById('textbox'); 9 tb.value=""; 10 if(timerId) clearInterval(timerId); 11 timerId=setInterval(function(){ 12 var len=tb.value.length; 13 if(str.length==len) clearInterval(timerId); 14 tb.value=str.substr(0,len+1); 15 },1000*speed); 16 } 17}); 18</script> 19<input type="text" id="textbox" size="50"> 20<input type="button" value="speed1" data-speed="0.05"> 21<input type="button" value="speed2" data-speed="0.1"> 22<input type="button" value="speed3" data-speed="0.3"> 23

投稿2017/05/08 08:45

編集2017/05/08 09:35
yambejp

総合スコア114583

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

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

goombeer

2017/05/08 09:12

ありがとうございます。 jqueryはまだ勉強できていなくて、私にはまだ理解できそうにありません。 誠に申し訳ありません。
yambejp

2017/05/08 09:36

ご自身で$('#textbox')と記載していたのでjQuery必須かと思いましたがそうでもないのですね? jQuery除いたピュアjavascript版を追記しておきました
goombeer

2017/05/08 10:36

ありがとうございます。 jqueryも見様見真似で書いたものでして・・・ 大変助かります!
guest

0

while文を使い、cntとstrが同じになるまで、処理を行います

とのことですが、逆です。

while 文は、テスト条件が true に評価される間、指定された文を実行するループを作成します

while - JavaScript | MDN

ついでに言えば、おそらくすべての処理が終わった後にDOMが再構成されるので、1文字ずつ表示されないと思います。setIntervalなどを使うといいかと思います。

投稿2017/05/08 08:35

Lhankor_Mhy

総合スコア35869

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

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

goombeer

2017/05/08 09:08

ありがとうございます! 確かにご指摘の通り、自分の理解が正しくありませんでした。 もう少し考えてみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問