- 締切済み
JavaScriptのノードについて教えてください
以下のコードなのですが追加されたテキストエリアにidをつけて保存する方法を教えてください それとテキストアリアを追加したときに横に並んで表示されるのですが 改行して表示するにはどうすればいいのでしょうか？ <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script src="plugins/plugin-loader.js"></script> <link rel="stylesheet" href="plugins/plugin-loader.css"> <script> // Set virtual screen width size to 320 pixels monaca.viewport({width: 320}); function addNode(){ <!--追加する子ノードを生成--> var kodomo = document.createElement("textarea"); <!--このノードのタグで囲まれている部分のテキストを設定--> kodomo.value = ""; <!--どこに追加するのか親ノードを指定--> var tuika = document.getElementsByTagName("div").item(1); <!--ここから子ノードを追加する命令--> tuika.appendChild(kodomo); } </script> </head> <body> <h1>テキストエリアの追加</h1> <!--初期は何もなし--> <div></div> <div><p>書き込んでください</p></div> <!--ボタン--> <button onClick="addNode();">追加</button> </body> </html> また追加ボタンを押したときに画面上部にテキストボックス、その下にテキストエリアを出す方法ってありますか？
- DreamyLife_615
- お礼率12% (16/124)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
こんにちは。 ＞テキストエリアにidをつけて保存する 任意のidでよければ、順に番号を付けてhoge0、hoge1、hoge2・・・とでもすれば良いですが、そもそもこのidって意味なくないですか？ いっそのこと１データにしてしまい、キー入力できないコード（たとえばtabとかesc)をセパレータとしてつなげておいて、読込み時にはsplitで分割するとかにすれば、keyは固定の一つですむと思います。 ＞テキストエリアの個数が決まっていなく あるだけ読み出せるはずです。 現在の方法でやるなら、localStorage.lengthで個数が取得できますので、それぞれに対して localStorage.key(n)でkeyが、localStorage[n]で値が取得できるはずです。 ＞改行して表示するにはどうすればいいのでしょうか？ ANo1様がすでにお答えのように、テキストエリアをブロック要素の子要素として位置づけるか、CSSで直接display:blockに設定するとかで可能かと。
- yambejp
- ベストアンサー率51% (3827/7415)
＞追加されたテキストエリアにidをつけて保存する方法 保存？ htmlで保存はできないと思いますけど idの付け方の提示がないので省略します。 ＞改行して表示するにはどうすればいいのでしょうか？ 改行はないでしょう・・・ divやpで囲むなど別の段落として定義すれば自然と改行(?)された表示になります ＞追加ボタンを押したときに画面上部にテキストボックス、その下にテキストエリアを出す方法 ざっと書いてみました。こういうことでしょうか？ <script> function addNode(){ var n0 = document.getElementById("hoge"); var n1 = document.createElement("div"); var n2 = document.createElement("input"); n2.setAttribute("type","text"); n1.appendChild(n2); n0.appendChild(n1); var n1 = document.createElement("div"); var n2 = document.createElement("textarea"); n2.setAttribute("value",""); n1.appendChild(n2); n0.appendChild(n1); } </script> <h1>テキストエリアの追加</h1> <div id="hoge"></div> <div><p>書き込んでください</p></div> <button onClick="addNode();">追加</button>
補足
コードまで書いていただきありがとうございます 保存についてなのですが今までだとlocalstorageを使って <textarea id="a"></textarea> <textarea id="b"></textarea> <script type="text/javascript"> var a = document.getElementById("a"); var b = document.getElementById("b"); window.onload = function() { var body_a = localStorage.getItem("a"); var body_b = localStorage.getItem("b"); if (body_a != null) a.value = body_a; if (body_b != null) b.value = body_b; } a.onchange = function() { localStorage.setItem("a",a.value); } b.onchange = function() { localStorage.setItem("b",b.value); } </script> このように保存していました ですが今回はテキストエリアの個数が決まっていなく無限に出せるようになっていてその保存方法がわからないのです 説明がへたくそになってしまいましたがもし方法をご存じなら教えていただきたいと思います