PDA

View Full Version : An easy question from a JavaScript beginner. How to add variable to itself?



NKeuxmuis
Feb 25th, 2011, 04:22 PM
Help me anyone I am completely stuck. If you do this I shall build a shrine in your honour.

In the following code the 'for' loop gets data from the relevant tags of an XML file, then puts them into the 'txt' variable. It then moves onto the next record in the XML file and does the same thing. However, I don't want the contents of txt to be overwritten each time the code loops through each record. Instead I want it to add to txt, then loop around and add the new contents of txt to the previous contents of txt. I tried txt = txt + artist + title + year; but this didn't work. Can anyone explain how to do this? Please note the contents of the variables are strings of text not numbers.




x=xmlDoc.getElementsByTagName("CD");
i=0;

function displayCD()
{
for (var i=0;i<x.length;i++)
{
artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
txt= "Artist: " + artist + "<br />Title: " + title + "<br />Year: "+ year;
}
document.getElementById("showCD").innerHTML=txt;
}

VIPStephan
Feb 25th, 2011, 04:26 PM
I’m not a JS pro either but I’d say don’t use innerHTML, use appendChild, as innerHTML is always overwriting the current content as far as I know.

xelawho
Feb 25th, 2011, 05:19 PM
I believe you can do this with innerHTML but I have been warned not to (for reasons that I don't really understand, something about how it's not standards-compliant I think) but anyway, I've gotten away with:

txt+= "Artist: " + artist + "<br />Title: " + title + "<br />Year: "+ year;

the way I understand it, the plus sign tells the code to add to the string on each loop, as opposed to overwriting it.

I think :D

kansel
Feb 25th, 2011, 05:43 PM
I've never done this any other way than described by xelawho, but I have noticed slow-down in execution when the content being updated grows several times its original size. Might this be why we are warned against it?

VIPStephan
Feb 25th, 2011, 05:48 PM
Well, with innerHTML, as I said, with every iteration the content will be overwritten with new content. Now, with the += type of addition you are overwriting the current content with itself while adding the new content. So, each time you erase the entire content and add the entire same content again plus the new stuff which will definitely become a huge load after a while. Therefore appendChild() is probably better as you’re only adding the new content at the end.

Logic Ali
Feb 25th, 2011, 06:07 PM
Unless it's defined elsewhere, you're redefining txt on each iteration. Define it outside the loop:

function displayCD()
{
var txt = "";
for (var i=0;i<x.length;i++)
{
artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
txt += "Artist: " + artist + "<br />Title: " + title + "<br />Year: "+ year + "<br />";
}
document.getElementById("showCD").innerHTML=txt;
}

xelawho
Feb 25th, 2011, 07:30 PM
ah, snap! thanks, VIP Stephan. So what would the code look like using appendChild() ?

VIPStephan
Feb 25th, 2011, 11:05 PM
Instead of document.getElementById("showCD").innerHTML+=txt; you would write:

document.getElementById("showCD").appendChild(txt);

xelawho
Feb 26th, 2011, 03:08 AM
aw, nuts. I just got confused again. I thought you were saying that this was the line that was overwriting and adding to itself:
txt += "Artist: " + artist + "<br />Title: " + title + "<br />Year: "+ year + "<br />";

by the time it gets to the innerHTML, hasn't the loop finished, so what that is getting passed is the completed chunk of strings all added to each other? :confused:

NKeuxmuis
Feb 26th, 2011, 11:25 AM
Yes xelawho the innerHTML part is outside of the loop and txt stores all of those strings/variables concatenated together. The problem was that it was just overwriting but I used appendchild as VIPStephan said which worked perfectly. So thanks for that VIPStephan it is much appreciated. You initially said that you were no Javascript pro but you underestimate yourself. You really seem to know what you are talking about. Thanks a lot for this