Q&A
「コードは作ったものの、コード内に挿入するにはどうしたらよいか」
とは具体的に何をどうしたいのでしょうか？
いまのコードでもinputの入力欄に文字をいれると、hogeに
表示されますよね？それがしたいのではないのでしょうか？
前提・実現したいこと
コード内にテキストボックスに入力した内容を挿入したい。
下のようなコードは作ったものの、コード内に挿入するにはどうしたらよいかわかりません。
該当のソースコード
html
1<!DOCTYPE HTML> 2<html lang="ja"> 3<head><title>Sample</title> 4</head> 5<body> 6 7<p> 8<input type="text" value="" 9onkeyup="document.getElementById('hoge').textContent = this.value;"/> 10</p> 11 12<div>◇ 以下に入力を反映↓ 13<div id="hoge"></div> 14</div> 15 16</body> 17</html> 18 19 20
ひとこと
上のコードは調べ、作れたのですが、その先はどうしてもわかりません。
どうかごかいとうよろしくおねがいします。
ご提示のコードを試してみましたが、動作しているように思えます。
どういった問題が発生していますか？
結果（実際に起きたこと）を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-1
期待した処理結果を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-3
「コード内」が何を表しているのか不明ですが、具体的には何なのでしょうか
。
「<input>に入力した内容をエンターキーを押すと<textarea>に入れ込み、入れ込んだら<input>の中身は空になり、<textarea>では改行がされて次の文字を打ち込む…ということをしたい」
とのことですが、ご提示のコードには<textarea>がないようです。
問題が再現するコードをご提示ください。
まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。
すみません。
「解決済み」にする方法がわかりません・・・
回答2件
0
<input>に入力した内容をエンターキーを押すと
inputをformで包んで、submitを拾うやり方はいかがでしょうか。
js
1document.querySelector('form').addEventListener('submit', e=>{ 2 e.preventDefault(); // デフォルトをキャンセル 3 //何かをする 4})
<textarea>に入れ込み
これは、以前からできていると思います。
js
1document.getElementById('textarea').textContent = document.getElementById('input').value
入れ込んだら<input>の中身は空になり
空文字列を代入すればいいです。
js
1document.getElementById('input').value = ''
<textarea>では改行がされ
JavaScriptの改行は\nです。
js
1document.getElementById('textarea').textContent += '\n'
補足依頼欄に合わせて追記
__「解決済み」にする方法がわかりません・・・ __
この「自己解決を記入する」です。
投稿2021/03/03 02:21
編集2021/03/16 00:37総合スコア36928
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
</head>
<body>
<p>
<input type="text" value=""
onkeyup="document.getElementById('hoge').textContent = this.value;"/>
</p>
<div>◇ 以下に入力を反映↓
<div id="hoge"></div>
</div>
<hr>
<p>
<form class="" action="index.html" method="post">
<input type="text" value=""
onkeyup="document.querySelector('form').addEventListener('submit', e=>{
e.preventDefault(); // デフォルトをキャンセル
//何かをする
})
document.getElementById('textarea').textContent = document.getElementById('input').value
document.getElementById('input').value = ''
document.getElementById('textarea').textContent += '\n'
"/>
</form>
</p>
<div>◇ 以下に入力を反映↓
<div id="hoge2"></div>
</div>
</body>
</html>
という事でしょうか…
（間違っていたらすみません…）
間違っていることに謝る必要などありません。
が、間違っています。
どこからお教えするべきかな、と悩むところです。
おそらく`onkeyup`がどんな役割なのかを理解されていないのだと思いましたので、ひとまず以下の記事を読んでみてください。
https://qiita.com/KKKarin/items/ccb8ed361ab9acd1f9cf
https://dayflower.hatenablog.com/entry/20080516/1210917670
わかった事・onkeyupとはキーボードを離したときに行う処理を指定できます。ということです。
ご理解の通りです。
そして、on～と、addEventListener の関係についてはご理解されましたか？
されているのであれば、コメント欄で示されたコードが間違っていることに気づくはずです。
承知しました。
考えてみます。
結果、明日ご返信いたします。
解決しませんか？
まだご不明の点があるようでしたら、コメントでご質問ください。
ありがとうございます。
解決しました。
お伝えが遅くなり、申し訳ございませんでした。
ご解決されて何よりです。
お手数ですが、自己解決の処理をお願いします。
自己解決の仕方を追記しました。
わかりにくいでしょうか？
「自己解決を記入する」をクリック
↓
回答欄に解決方法を記述
↓
回答を投稿
↓
自己解決にする
という手順です。
0
「コード内」という考え方を捨ててください。
JavaScriptはDOMと呼ばれる「オブジェクト」を操作します。MDNなどで確認してみればわかりますがgetElementById()で取得できるのはElementオブジェクトです。
そのオブジェクトに対して、イベントを付与したり各プロパティの値を取得、変更したりすることで画面上の要素に変化をもたらします。
textContentもそんなプロパティの1つです。
で、提示されたコードをコピペで実行してみましたが、入力度に#hogeに入力値が反映されています。やりたいことはこれではないのですか？
投稿2021/03/02 06:58
総合スコア80875
返信が遅れ、申し訳ございません。
<input>に入力した内容をエンターキーを押すと<textarea>に入れ込み、入れ込んだら<input>の中身は空になり、<textarea>では改行がされて次の文字を打ち込む…ということをしたいです。
さすがに難しいでしょうか…
失礼ながら、今の質問者さんには難しいのは明白かと。
やりたいことだけ先行してもできないのは当然で、そこまで必要な部品の明確化や部品集め、個々の検証を己のスキルと向き合ってやっていく必要があります。
スキルも含めて必要な部品が何があって今どの程度揃っているか具体化しては如何でしょうか。
あなたの回答
tips
プレビュー
