Q&A
前回の質問（ https://teratail.com/questions/b0j89y8sthelc5 ）ではソースコードが綺麗に貼り付けられていましたが今回は何故汚くなっているのですか？適当に質問しても回答が得られると甘えていますか？訂正して下さい。
前提
簡単なカレンダーアプリを作っています。
文字を追加で入力する機能の実現方法がわからず詰まっています。
実現したいこと
文字を追加で入力できるようにしたい
発生している問題・エラーメッセージ``
入力した文字のみが出力されてしまい新たに文字を追加すると上書きされてしまう
### 該当のソースコード ```ここに言語名を入力 <html> <body> <select id="select_box" size="1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="31">31</option> </select> <input type="text" id="input" /> <button type="button" onclick="buttonClick()">登録</button> <br/> <br/> <table border="1"> <tbody> <tr> <td>1</td> <td id="td_1"> </td> </tr> <tr> <td>2</td> <td id="td_2"> </td> </tr> <tr> <td>3</td> <td id="td_3"> </td> </tr> <tr> <td>4</td> <td id="td_4"> </td> </tr> <tr> <td>31</td> <td id="td_31"> </td> </tr> </tbody> </table> </body> <script> function buttonClick() { var select_number = document.getElementById("select_box").value; var input_value = document.getElementById("input").value; document.querySelector("#td_" + select_number).innerHTML = input_value; console.log(("#td_"+select_number).value+input_value); } </script> </html>
回答1件
0
ベストアンサー
js
1document.querySelector("#td_" + select_number).innerHTML = input_value;
ここで既存の値を無視して上書きしています。上書きではなく追加しましょう。たとえば:
js
1document.querySelector("#td_" + select_number).insertAdjacentHTML( 2 'beforeend', `<p>${input_value}</p>`);
投稿2022/08/09 03:08
編集2022/08/09 03:08
総合スコア20884
あなたの回答
tips
プレビュー
