Hello.
I can not understand why appendChild behaves in two different ways in my code. i have used appendChid in function below:
function repalceImgs(tempArray,imgsNo,curIndex){
var x = document.getElementById("container").getElementsByClassName('pics');
var newdiv = document.createElement('div');
newdiv.setAttribute('id', 'pics');
newdiv.setAttribute('class', 'pics');
for (i = 0; i < imgsNo; i++) {
newdiv.appendChild(tempArray[i]);
}
x[0].parentNode.replaceChild(newdiv, x[0]);
var srcString = tempArray[curIndex].src;
srcString = srcString.replace("small", "big");
var x = document.getElementById("container").getElementsByClassName('big-image');
x[0].src = srcString;
}
I call replaceImgs function from two different functions. one of them is moveRight function with code below:
function moveRight(){
imageArray = getSmallImgs();
imgsNo = imageArray.length;
curIndex = findCur();
tempArray = new Array();
for (var i = 0; i < (imgsNo - 1) ; i++) {
tempArray[i + 1] = imageArray[i];
}
tempArray[0] = imageArray[imgsNo - 1];
for (var i = 0; i < imgsNo; i++) {
if (i < 3) {
tempArray[i].style.display = "inline";
} else {
tempArray[i].style.display = "none";
}
}
imageArray[curIndex].style.borderWidth = "thick"*/
curIndex++;
repalceImgs(tempArray,imgsNo,curIndex);
}
the other function is used as click event on a picture with code below:
function selectFun (){
imageArray = getSmallImgs();
imgsNo = imageArray.length;
curIndex = -1;
for (var i = 0; i < imageArray.length; i++) {
if(imageArray[i] == this){
curIndex = i;
}
}
repalceImgs(imageArray,imgsNo,curIndex)
}
When repalceImgs() is called from moveRight() the appendChild function adds the items in the tempArray to the newdiv but the items are not removed from tempArray.
When repalceImgs() is called from selectFun() the appendChild function adds each item in the tempArray to the newdiv and the added item is removed from tempArray.
I can not understand why this happens. I think appendChild() should work the same in these two cases.