Javascript 使用Java脚本将可变数量的答案保存到单个文本框_Javascript_Html

Javascript 使用Java脚本将可变数量的答案保存到单个文本框

javascript html

Javascript 使用Java脚本将可变数量的答案保存到单个文本框,javascript,html,Javascript,Html,我正在学习JS，我还不熟悉内部工作。有人能指出我思维中的错误吗基本思想是问一个复杂的问题，用JS（CSV语法）构造答案，然后将其输入文本框。（从这里它将被处理成一个数据库。）下面的例子包括：你有多少个孩子？他们的名字和年龄是多少也许，第一个按钮生成的新元素没有添加到文档中？如何做到这一点，或者如何解决其中的价值在添加新行时，如何使提交到前几行的值保持不变。例如，'Jack'和'10'写入第一行，用户按下添加新行，则此信息应保留在第一行工作不正确示例：如果添加了循环中的代码，“保存”按钮将

我正在学习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>


你有几个孩子？他们的名字和年龄是多少
添加新条目
拯救
var线=0；
函数addNew（）{
行++；
document.getElementById（“qchildren答案包装器”）.innerHTML+='Gyermek-neve:Gyermek-eletkora:
；
}
函数save（）{
var-answer=''；
对于（变量ii=0；ii

尝试以下代码：

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++;
}

函数addNew（）
{
var div=document.createElement（'div'）；
div.innerHTML='Gyermek-neve:Gyermek-eletkora:
'；
document.getElementById（“qchildren答案包装”）.appendChild（div）；
行++；
}

演示：

在您的情况下，所有先前创建的元素都会重新创建，因为

element.innerHTML+=“some_html”

等于

element.innerHTML=element.innerHTML+“some_html”

，或者更清楚地说，我想是

var oldHtml=element.innerHTML；element.innerHTML=“”；element.innerHTML=oldHtml+“一些html”

当您执行

var oldHtml=element.innerHTML

时，浏览器不会填充用户输入的值=“…”，并且在

+=

之后，您会重新创建没有用户输入值的旧元素。同时，appendChild不会重新创建旧元素

示例演示了

.innerHTML

如何仅返回初始HTML（我已将value=“test”添加到

qchildrenname

元素代码中）

=下面的代码应如何工作（AddNew函数已更改）：


你有几个孩子？他们的名字和年龄是多少
添加新条目
拯救
var线=0；
函数addNew（）
{
行++；
var newElement=document.createElement（“span”）；
newElement.innerHTML='Gyermek-neve:Gyermek-eletkora:
'；
document.getElementById（“qchildren答案包装”）.appendChild（newElement）；
}
函数save（）
{
var-answer=''；
对于（var ii=1；ii不要使用多个input
元素来添加额外的行，而是使用textarea
元素。我的任务更复杂。可能需要使用下拉框、日期选择器等。无法提示用户构造正确的语法。谢谢，这解决了添加新行时出现的数据粘滞问题。保存仍然不可用。）ork。还调整了保存的代码。需要从1开始，而不是从0开始。谢谢，这解决了添加新行时数据停滞的问题。保存仍然不起作用。请参阅更新的答案。我已将行++移到addNew的末尾。添加新项时，从1开始（因为行在使用之前是递增的），但当您尝试收集值时-从0开始
<!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>