- 締切済み
HTMLとJSでtxet内容を表示したい
下記のコードで質問があります。 仕様としてはtextに何かを書き込んで追加ボタンでテキストボックスの下に書き込んだ内容が表示され保存されるという風にしたいですが途中から何を書けばいいかわからなくなってしまいました。 ご指導お願いいたします <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <head> <body> <input type="text" id="form_txt"> <input type="button" width="50" value="追加" onclick="add_txt()"> <script> function add_txt() { var result = document.getElementById('form_txt'); /*ここからが何を書けばいいかわかりません・・・。*/ } </script> </body> </html>
- DreamyLife_615
- お礼率12% (16/124)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- まえ かず（@kazumae）
- ベストアンサー率50% (25/50)
> この表示した文字を保存するにはどうすればいいのでしょうか？ データベースに繋いで、データを登録すれば保存できます。またプログラムでデータベースからデータを引っ張ってくれば再度表示されます。htmlソースにJsで表示したデータを状態を保存する（htmlソースを書き込む）ことは出来ないと思います（出来たとしてもかなりイレギュラーなやり方になると思います） ただし、これはこの解答欄で説明できるほど簡単なことではないので、「データベース」「プログラミング」などをキーワードに調べながら独習するか、講習などを受けるかする必要があります。
- まえ かず（@kazumae）
- ベストアンサー率50% (25/50)
[考え方] テキストボックスに入力された値を表示する箱をhtmlで書いておく必要があります。箱がないと、その文字はどこに表示すればよいかわからないからです。そしてJs側でその箱に文字を入れてあげることによって表示される、ということになります。 ちなみにこういった動きは今はjQueryというライブラリで簡単に出来るようになっていますので、そのへんも調べてみると良いかと思います。 [サンプルソース] <!DOCTYPE html> ... <input type="text" id="form_txt" /> <input type="button" value="追加" onclick="add_txt()" /> <div id="result"></div> ←メッセージを入れる箱 ... <script> function add_txt() { var result = document.getElementById('form_txt').value; ←.value を追加し、input内のvalue値を取得 document.getElementById("result").innerHTML = result; ←取得した値を箱のなかに入れる } </script> ... </html>
補足
詳しくありがとうございます この表示した文字を保存するにはどうすればいいのでしょうか？