Question

这是我的网页代码：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Marketing Tracking</title>
    </head>
    <body>
        <form action="#" id="form" method="post">
            <div id="namevalues">
                <span id="span:1">
                    <input type="text" id="name:1" onchange="changed(this)" style="width:300px;"/>
                    <input id="value:1" type="number" min="0" value="0" /><br /></span>
            </div>
            <input type="button" id="add" value="Add 1" />
            <br />
            <textarea name="talk" style="width:500px;height:175px;"></textarea>
            <br />
            <input type="button" id="update" value="Update"/>
        </form>
        <script>
function get(a){return document.getElementById(a);}
    up=get("update");
    up.onclick = function(){
    get("form").submit();
}
get("name:1").onchange = function(){changed(this)};
get("add").onclick = function(){add()};<% z=2 %>
function changed(ele){
    id=ele.id;
    val=ele.value;
    id=id.split(":")[1];
    get("value:"+id).name=get("name:"+id).value;
}
function add(){
    document.getElementById("namevalues").innerHTML+='<span id="span:'+z+'"><input type="text" id="name:'+z+'" onchange="changed(this)" style="width:300px;"/><input id="value:'+z+'" type="number" min="0" value="0" /><br /></span>';
}
        </script>
    </body>
</html>

我很困惑为什么当我按下“添加1”按钮输入一些文本然后再次按“添加1”按钮时，我刚刚输入的文字消失了！

如果有人能对此提供一些见解，我们将不胜感激

Answer 1

你的其他值消失的原因是，当你执行something.innerHTML += something时，它将重写该区域的HTML（意味着以前的内容已经消失，将被新的新HTML替换）。您可能想要做的就是：

function add(){
    var div = document.createElement("div");
    div.innerHTML = '<span id="span [... the rest of the code ...]<br /></span>';
    document.getElementById("namevalues").appendChild(div);
}

使用appendChild不会改变div namevalues中已有的其他元素。

Answer 2

只是一件小事，但尝试使用

<script type="text/javascript">

当我使用inner.document时，我遇到了各种各样的问题，直到我添加了该代码。

getElementById（element）.innerHTML cache？

2 个答案: