【javascript】ローカルストレージ登録と同時に、同じ文字を遷移なく画面に表示させたい

下記はFORMに記載されている内容をローカルストレージに書き込むスクリプトです。
フォームのテキストボックスに記載し、SUBMITボタンを押すとローカルストレージに登録が可能です。

javascript
1<html>
2
3<form method="post" action="">
4<input type="text" id="myname" name="myname" value="">
5  <input type="submit" name="btn_submit" value="送信">
6</form>
7
8<script>
9var input_submit = document.querySelector("input[type=submit]");
10input_submit.addEventListener("click", function(e){
11	// フォームの送信キャンセル
12	e.preventDefault();
13	var input_myname = document.querySelector("input[name=myname]");
14	console.log(input_myname.value); 
15	var input_myname_value=input_myname.value;
16localStorage.setItem('myname', ''+input_myname_value+'');
17  // 送信ボタン
18	var input_submit = document.querySelector("input[name=btn_submit]");
19	console.log(input_submit.value); // 送信
20});
21</script>
22
23	<!-- jQuery -->
24	<script src="js/jquery.min.js"></script>
25
26</html>
27
28

やりたいこと。
上記で記載した内容を「SUBMITボタンを押して」ローカルストレージに登録したと同時に同じ画面上で表示させたいです。この文字だけ表示されるのではなく、今ある画面に自然に追加される形(遷移なし)=ajaxでの表示みたいなことを考えています。

下記のようにdocument.writeを使用したところ、登録文字は表示はされたのですが、
表示されるのは「document.writeの内容のみ表示であとは全部消滅」となり、期待した「現行画面のまま文字だけ追加」になりません。

javascript
1<html>
2
3<form method="post" action="">
4<input type="text" id="myname" name="myname" value="">
5  <input type="submit" name="btn_submit" value="送信">
6</form>
7
8<script>
9var input_submit = document.querySelector("input[type=submit]");
10input_submit.addEventListener("click", function(e){
11
12	// フォームの送信キャンセル
13	e.preventDefault();
14
15	var input_myname = document.querySelector("input[name=myname]");
16	console.log(input_myname.value); // テスト太郎
17	var input_myname_value=input_myname.value;
18localStorage.setItem('myname', ''+input_myname_value+'');
19
20document.write("名前 "+input_myname_value+"<BR>");
21
22
23document.getElementById('id名');
24
25
26  // 送信ボタン
27	var input_submit = document.querySelector("input[name=btn_submit]");
28	console.log(input_submit.value); // 送信
29});
30</script>
31
32	<!-- jQuery -->
33	<script src="js/jquery.min.js"></script>
34
35</html>
36

どのようにすれば、現行画面に文字だけ追加という形が取れるでしょうか

よろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

document.write()は原則使ってはいけないものだと思ってください。

DOMのAPIでなんとかしましょう。
たとえば、

js
1document.body.insertAdjacentHTML('beforeend',
2    `名前  ${input_myname_value}<br>`);

など。

注: input_myname_value に & や < が入っていると壊れるので、適切にエスケープする必要があります。

投稿2021/10/17 07:29

int32_t

総合スコア20882

tajix_japan

2021/10/17 08:38

有難うございます。 document.body.insertAdjacentHTML('beforeend', `名前 ${input_myname_value}<br>`); でうまく表示されました。有難うございました。深く御礼申し上げます。

行動規範の内容に同意します

document.write()はドキュメント全体に対してのメソッドなので、ドキュメントの中身が消えてしまいます。あまり使わない方がよいでしょう。
代わりに、結果を表示する要素を用意してdocument.querySelector()
などでその要素を取得し、textContentに文字列を設定するとよいでしょう。

Node.textContent - Web API | MDN
Element.innerHTML - Web API | MDN

他にもいくつかの点を修正してみたコードが以下です。

html
1<html>
2
3<form method="post" action="">
4    <input type="text" id="myname" name="myname" value="">
5    <input type="submit" name="btn_submit" value="送信">
6</form>
7<!-- 結果表示用の要素を追加 -->
8<p id="result"><p>
9
10<script>
11const input_submit = document.querySelector("input[type=submit]");
12input_submit.addEventListener("click", e => {
13
14    // フォームの送信キャンセル
15    e.preventDefault();
16
17    const input_myname = document.querySelector("input[name=myname]");
18    console.log(input_myname?.value); // テスト太郎
19    const input_myname_value=input_myname?.value ?? '';
20    localStorage.setItem('myname', input_myname_value);
21
22    // 結果表示用の要素を取得して、中身に結果を表示
23    const result = document.querySelector('#result');
24    if (result) {
25        result.innerText = `名前 ${input_myname_value}`);
26    }
27
28    // 送信ボタン
29    const input_submit = document.querySelector("input[name=btn_submit]");
30    console.log(input_submit?.value); // 送信
31});
32</script>
33
34</html>

varではなくconstを使う
文字列の結合ではなくテンプレートリテラルを使う
nullが帰ってくる可能性がある部分をNull合体演算子やオプショナルチェーンで処理する
jQueryは使っていないので不要

以上、お役に立てれば幸いです。

投稿2021/10/17 07:31

編集2021/10/17 07:37

fj68

総合スコア752

tajix_japan

2021/10/17 08:32

有難うございます。私の知らないことばかりで勉強になります。馬鹿の一つ覚えでvarしか使ってなかったのでconstは目からうろこです。有難うございました。頂きましたソースのコピペではそのままではなぜか動きませんでした。ちよっとした筆の誤りがあるのかもしれませんので頂いたURLを参照に勉強させていただきます。わざわざ丁寧に作成いただきありがとうございました。深く御礼申し上げます。

行動規範の内容に同意します

あなたの回答