2

私はJSを学んでいますが、内部の仕組みにはまだ慣れていません。誰かが私の考えの誤りを指摘できますか?

基本的な考え方は、複雑な質問をし、JS を使用して (CSV 構文に) 回答を作成し、それをテキスト ボックスに入力することです。(ここから db に処理されます。) 以下に含まれる例: 子供は何人いますか? 彼らの名前と年齢は？

おそらく、最初のボタンによって生成された新しい要素がドキュメントに追加されていませんか? これを行う方法、またはその値に対処する方法は?

新しい行を追加する場合に、前の行に送信された値を保持するにはどうすればよいですか。たとえば'Jack'、'10'最初の行に書き込まれ、ユーザーが新しい行の追加を押した場合、この情報は最初の行にとどまる必要があります。

正しく動作しない例: ループ内のコードが追加されると、保存ボタンが機能しなくなります。

<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
    </head>
    <body>

        <p>How many children do you have? What is their names and age?</p>
        <input type="text" id="qchildren" />
        <div id="qchildren-answer-wrapper"></div>

        <button type="button" onclick="addNew()">Add new entry</button>
        <button type="button" onclick="save()">Save</button>
        <script>
        var lines = 0;

        function addNew() {
            lines++;
            document.getElementById("qchildren-answer-wrapper").innerHTML += 'Gyermek neve:<input type="text" id="qchildrenname' + window.lines + '" /> Gyermek eletkora:<input type="text" id="qchildrenage' + window.lines + '" /><br/>';
        }

        function save() {
            var answer = '';
            for (var ii = 0; ii < window.lines; ii++) {
                answer += document.getElementById('qchildrenname' + ii.toString()).value.toString() + ',' + document.getElementById('qchildrenage' + ii.toString()).value.toString() + ';';
            }
            document.getElementById("qchildren").value = answer;
        }
        < /script>
    </body>
</html>
4

2 に答える 2

1

次のようなコードを試してください。

function addNew()
{
    var div = document.createElement('div');
    div.innerHTML = 'Gyermek neve:<input type="text" id="qchildrenname'+window.lines+'" /> Gyermek eletkora:<input type="text" id="qchildrenage'+window.lines+'" /><br/>';
document.getElementById("qchildren-answer-wrapper").appendChild(div );
lines++;
}

デモ: http://jsfiddle.net/JByVg/8/

あなたの場合、以前に作成されたすべての要素が再度作成されるということelement.innerHTML += "some_html"ですelement.innerHTML = element.innerHTML + "some_html"。var oldHtml = element.innerHTML;element.innerHTML = ""; element.innerHTML = oldHtml + "some_html"

ユーザーが値を入力せずに古い要素を再作成しvar oldHtml = element.innerHTMLた後、ブラウザはユーザーが入力した value="..." を入力しません。+=同時に、appendChild は古い要素を再作成しません。

この例.innerHTMLは、初期 HTML のみを返す方法を示しています (qchildrenname要素コードに value="test" を追加しました) 。

于 2012-12-27T14:42:19.877 に答える
1

=以下のコードが機能するはずです (AddNew 関数が変更されました):

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
</head>
<body>

<p>How many children do you have? What is their names and age?</p>
 <input type="text" id="qchildren" />
 <div id="qchildren-answer-wrapper"></div>



<button type="button" onclick="addNew()">Add new entry</button>
<button type="button" onclick="save()">Save</button>

<script>
var lines=0;
function addNew()
{
lines++;
var newElement = document.createElement("span");
  newElement.innerHTML =  'Gyermek neve:<input type="text" id="qchildrenname'+window.lines+'" /> Gyermek eletkora:<input type="text" id="qchildrenage'+window.lines+'" /><br/>';
document.getElementById("qchildren-answer-wrapper").appendChild(newElement);
}

function save()
{
var answer='';
for (var ii=1;ii<=window.lines;ii++)
{ 
answer+=document.getElementById('qchildrenname'+ii.toString()).value.toString()+','+document.getElementById('qchildrenage'+ii.toString()).value.toString()+';';
}
document.getElementById("qchildren").value=answer;
}
</script>


</body>
</html>​
于 2012-12-27T14:42:23.933 に答える