CODEWITHSUNDEEP
javascripthtmldomdom-events
gabeio
gabeio

Reputation: 1310

getElementById(element).innerHTML cache?

This is my page code:

<!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>

I am very confused as to why when I press the Add 1 button enter some text and then press the Add 1 button again the text that I just entered disappears!

If anyone could give some insight to this it would be greatly appreciated.

Upvotes: 1

Views: 1666

Answers (2)

HoLyVieR
HoLyVieR

Reputation: 11134

The reason your other values disappear is because when you do something.innerHTML += something it will rewrite the HTML for that zone (meaning what was there before is gone and will be replaced with fresh new HTML). What you probably want to do is something along this :

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

Using appendChild won't alter the other element that are already in the div namevalues.

Upvotes: 2

John Verber
John Verber

Reputation: 755

Just a small thing but try using 

<script type="text/javascript">

When I was using inner.document stuff I had all kinds of problems until I added that code.

Upvotes: 0

Related Questions