Q&A
ありがとうございました。 やりたいことができましたので、非常に助かりました。ノード指定方式はうまくいきました。
テキストエリアに書いた内容を、別場所（下のほう）に<p>で囲んで表示したいと思いまして、
以下通り書きましたが、うまくいかないですね、何が問題でしょうか？ 教えてください。
HTML/Javascript
1<body> 2 <div id="test"> 3 <textarea id="text">これはテストです</textarea> 4 <button onclick ="postTxt()" id="add-btn">登録</button> 5 6 <div id="post"> 7 <!--<p>テキストが表示される</p>--> 8 </div> 9 </div> 10 11 <!-- Javascript --> 12 <script> 13 14 let text = document.querySelector('#text') 15 let post = document.querySelector('#post') 16 17 //HTML書き込む 18 function postTxt () { 19 if (text.value == 0) { 20 alert('入力してください。') 21 } else { 22 if (window.confirm ('登録しますか？')) { 23 post.appendChild(` 24 <p>${text.value}</P> 25 `) 26 } 27 } 28 } 29 </script> 30</body>
回答2件
0
ボタン押したときの情報を保持してない
とかですかね（何が起きたか書いてないので推測ですが）
関数実行前に得た情報なので実行時の情報は持っていません。
現在のコードだと画面表示時の情報のみ。
実行毎にオブジェクトを取得してください。
また、HTMLも一部なので一概には言えませんが、buttonの初期値はtype=submitなのでフォーム送信しないならtype=buttonを明示しておきましょう。
投稿2021/07/25 13:49
総合スコア80861
0
ベストアンサー
write()はdocument.write()と書いたと同じことになるので出力内容が空欄で上書きされてしまいます。
writeではなく、別の名前を使用した方が良いですね。
javascript
1 post.appendChild(` 2 <p>${text.value}</P> 3 `)
この部分は、jQueryのappendとは違いテキストではなくNodeを指定します。
javascript
1 let p = document.createElement("p") 2 p.textContent = text.value 3 post.appendChild(p) 4
投稿2021/07/25 14:07
総合スコア239
追加で教えてください。
上のコードを以下のコードを使い、ご指摘通り修正しましたが、うまく動かないですね、どこがおかしいでしょうか？
post.appendChild(`
<p>${text.value}</P>
`)
appendChildの中はテキストではなくNodeですね。
```
<body>
<div id="test">
<textarea id="text">これはテストです</textarea>
<button onclick ="postTxt()" id="add-btn">登録</button>
<div id="post">
<!--<p>テキストが表示される</p>-->
</div>
</div>
<!-- Javascript -->
<script>
let text = document.querySelector('#text')
let post = document.querySelector('#post')
//HTML書き込む
function postTxt() {
if (text.value == 0) {
alert('入力してください。')
} else {
if (window.confirm ('登録しますか？')) {
let p = document.createElement("p")
p.textContent = text.value
post.appendChild(p)
}
}
}
</script>
</body>
```
文字列で指定したい場合は、innerHTMLを使います。
```
post.innerHTML += `<p>${text.value}</p>`
```
ありがとうございました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/07/26 14:07