2

我正在学习 JS，但我还不熟悉内部工作。有人可以指出我的想法中的错误吗？

基本思想是提出一个复杂的问题，用 JS（以 CSV 语法）构造答案并将其提供给文本框。（从这里它将被处理到一个数据库。）下面的例子：你有几个孩子？他们的名字和年龄是多少？

也许，第一个按钮生成的新元素没有添加到文档中？如何做到这一点，或者如何解决其中的价值？

在添加新行的情况下，如何使提交到前一行的值保持不变。例如'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"

浏览器不会填充用户输入的 value="..." 当您这样做时var oldHtml = element.innerHTML以及在+=您重新创建没有用户输入值的旧元素之后。同时，appendChild 不会重新创建旧元素。

此示例演示如何.innerHTML仅返回初始 HTML（我已将 value="test" 添加到您的qchildrenname元素代码）

于 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 回答