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

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

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

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

2941閲覧

HTMLのtextareaの文字を書き換え

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/12/02 16:22

編集2022/01/12 10:55

現在webページを作成しているのですが、二つ目のtextareaに決められたコマンドが打ち込まれた場合、一つ目のtextareaの中の文を書き換えていくというシステムを作りたいのですが、それは可能でしょうか

流れとしては
1.一つ目のtextareaで「./a.outを入力してください」という指示を書いておく
2.二つ目のtextarea(codeMirror)に指示された./a.outを入力してもらう
3.入力して正しければ、一つ目のtextareaが「つぎは・・・を入力しましょう」と文を書き換えていく

といった流れです。
もしありましたら、教えていただけると助かります。よろしくお願い致します

HTML

1<!DOCTYPE html> 2<html> 3<head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>sample1-1</title> 6 <script src="lib/codemirror.js"></script> 7 <link rel="stylesheet" href="lib/codemirror.css"> 8</head> 9<body> 10 <h1>sample</h1> 11 <br /> 12 <br /> 13 <div><textarea ROWS=20 COLS=60 style="border:thick ridge #7f7f7f;background-color:#ffffff;color:#000000;" readonly> 14テスト</textarea></div> 15 <h2>ここに入力</h2> 16 <div><textarea id="code2" name="code2"> 17 </textarea></div> 18 <script> 19 CodeMirror.fromTextArea(document.getElementById("code2"), {mode: "python", lineNumbers: true}); 20 </script> 21 </body> 22</html>

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2016/12/02 16:26

「二つ目のtextareaに決められたコマンドが打ち込まれた場合、一つ目のtextareaの中の文を書き換えていく」どういうルールでどのように書き換えたいのかがわからないと回答ができません。
kei344

2016/12/02 16:34

「決められたコマンド」とはどのようなものでしょう。
guest

回答1

0

動き的には、こんな感じですかね?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6</head> 7<body> 8<div id="textarea1"> 9 <textarea></textarea> 10</div> 11<div id="textarea2"> 12 <p><span id="text">./a.out</span>と入力しましょう。</p> 13</div> 14<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 15<script> 16 $("#textarea1 textarea").change(function () { 17 if ($(this).val() == $("#text").text()) { 18 $("#textarea2 p").html('次は、<span id="text">text</span>と入力しましょう'); 19 } 20 }).change(); 21</script> 22</body> 23</html>

決められたコマンドというのが2つ以上あるならこんな感じにすればいいんじゃないでしょうか。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6</head> 7<body> 8<div id="textarea1"> 9 <textarea></textarea> 10</div> 11<div id="textarea2"> 12 <p><span id="text">./a.out</span>と入力しましょう。</p> 13</div> 14<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 15<script> 16 var i = 0, commands = [ 17 'text', 18 'text1', 19 'text2', 20 'text3' 21 ]; 22 $("#textarea1 textarea").change(function () { 23 if ($(this).val() == $("#text").text()) { 24 $("#textarea2 p").html('次は、<span id="text">' + commands[i] + '</span>と入力しましょう'); 25 i++; 26 } 27 }).change(); 28</script> 29</body> 30</html>

わからないところとかあったらコメントとかでおしえてください。
補足

説明を入れたいときも、上でやっていることを参考にすると簡単に実現できます。
今回はtextarea2に新しくspan.introを追加してそこに説明を表示させています。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6</head> 7<body> 8<div id="textarea1"> 9 <textarea></textarea> 10</div> 11<div id="textarea2"> 12 <p><span id="text">./a.out</span>と入力しましょう。</p> 13 <span id="intro"></span> 14</div> 15<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 16<script> 17 var i = 0, commands = [ 18 'text', 19 'text1', 20 'text2', 21 'text3' 22 ]; 23 var intro = [ 24 "textの説明", 25 "text1の説明", 26 "text2の説明", 27 "text3の説明" 28 ]; 29 $("#textarea1 textarea").change(function () { 30 if ($(this).val() == $("#text").text()) { 31 $("#textarea2 p").html('次は、<span id="text">' + commands[i] + '</span>と入力しましょう<br>'); 32 $("#intro").html(commands[i] + 'の説明: ' + intro[i]); 33 i++; 34 } 35 }).change(); 36</script> 37</body> 38</html>

補足の補足

直近で打ち込まれた文字を認識するにはlastIndexOfメソッドを使用すると実現できます。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6</head> 7<body> 8<div id="textarea1"> 9 <textarea></textarea> 10</div> 11<div id="textarea2"> 12 <p><span id="text">./a.out</span>と入力しましょう。</p> 13 <span id="intro"></span> 14</div> 15<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 16<script> 17 var i = 0, commands = [ 18 'text', 19 'text1', 20 'text2', 21 'text3' 22 ]; 23 var intro = [ 24 "textの説明", 25 "text1の説明", 26 "text2の説明", 27 "text3の説明" 28 ]; 29 $("#textarea1 textarea").keypress(function () { 30 var lastLine = (this.value).substr((this.value).lastIndexOf("\n") + 1); 31 if (lastLine == $("#text").text()) { 32 $("#textarea2 p").html('次は、<span id="text">' + commands[i] + '</span>と入力しましょう<br>'); 33 $("#intro").html(commands[i] + 'の説明: ' + intro[i]); 34 i++; 35 } 36 }).change(); 37</script> 38</body> 39</html>

投稿2016/12/02 23:43

編集2016/12/06 07:39
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

退会済みユーザー

退会済みユーザー

2016/12/04 03:04

回答ありがとうございます。動き的にはこのような感じです あと指示だけでなく説明文もコマンドの説明文も載せようと考えているのですが、 それらも書き換えることは可能でしょうか?
退会済みユーザー

退会済みユーザー

2016/12/04 21:19

textarea3とかを用意して、そこで上のコードを同じようなことをやればできると思いますよ。
退会済みユーザー

退会済みユーザー

2016/12/06 01:17

度々ありがとうございます コードを参考に作成しているのですが、エンターキーなどを押しても表示切替がされなくて困っています その場合どうすればよいでしょうか?
退会済みユーザー

退会済みユーザー

2016/12/06 06:50

すみません動きました ですが、エンターキーで変化させようとしたところ、一行目での打ち込みしか対応できません 直前に打ち込まれたもので変化させるにはどのようにすればよいでしょうか?
退会済みユーザー

退会済みユーザー

2016/12/06 06:52

コード中ではchangeイベントが発生したときにテキストボックスに入力された内容のチェックをしています。 changeイベントが発生するのはテキストボックスからフォーカスが外れたときですので、そこをkeyupイベントとかに変えるとキーが打たれるごとにテキストボックスに入力された内容のチェックをするようになります。
退会済みユーザー

退会済みユーザー

2016/12/06 06:57

直前に打ち込まれたもので変化させる、とはどのような動作なのかもう少し具体的におねがいします。
退会済みユーザー

退会済みユーザー

2016/12/06 07:14

言葉が足らず申し訳ございませんでした 先ほどkeypressに変えて実行したのですが、コマンドを打ちエンターキーを押したとき無事実行され、文字も書き換えられました ですが二行目で打ったコマンドはエンターキーを押しても文字が書き換えられませんでした このように直近で打ち込まれたコマンドを認識するにはどうすればよいでしょうか?
退会済みユーザー

退会済みユーザー

2016/12/06 07:40

詳しく返信していただきありがとうございます。 直近で打ち込まれた文字を認識するにはlastIndexOfメソッドを使用すると実現できます。 追記いたしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問