Assistance with an unsolved javascript issue

Question

This is following on from a problem I was having, and am continuing to have, earlier. I posted a question on it here: Updating an array on button click Javascript already but I still couldn't find a solution. Perhaps I didn't explain it entirely clearly.

Basically, what I'm aiming to do is remove an element from an array when the user clicks a link. what my program does currently, is remove it from the array (I can tell from alerts I have used to test) and the screen. However when I add an element from scratch again it seems to re-add/retain the values that were just deleted.

var theImages = new Array();

//When the user clicks save
//The image(dataURI) is added to an array.
//JSON.stringify function used to store the dataURIs in localStorage:
function save(URL) {
    theImages.push(URL);
    var x = JSON.stringify(theImages);
    localStorage.setItem('images', x);

//drawImages function called and the array is passed through in string form.    
drawImages(x);
}

function drawImages(array){

    //Convert the array back into array form:
    array = JSON.parse(array);
    //array = [];

    //If an image is saved, display the saveArea div:
    if (array.length > 0){
        document.getElementById("saveArea").style.visibility="visible";
    }

    //Clear the elements that might already be in the div so they don't appear twice:
    var theDiv = document.getElementById("saveArea");
    while (theDiv.firstChild) {
    theDiv.removeChild(theDiv.firstChild);
    }

    //Loop to display all images in the array:
    for (var x=0; x < array.length; x++){ 
    //alert(array.length);
                    //Create image for each value in array:


                    //Create a div to contain each image:
                    var divimg = document.createElement("div");

                    divimg.style.marginRight="10px";
                    //divimg.style.border = "1px dotted red";
                    divimg.className = "saveContainer";
                    divimg.style.width = 300+"px";
                    divimg.style.padding = 5+"px";
                    divimg.style.marginRight="10px";
                    divimg.style.height = 150+"px";
                    divimg.style.display="inline-block";    
                    divimg.style.marginRight="35px";



             //Add the container(s) to the surrounding main container:
             document.getElementById("saveArea").appendChild(divimg);


                                            //Create the image:
                    var img = document.createElement("img");

                                            //Set the source equal to point x in the 
                                            //Array of dataURIs
                                            img.src = array[x];
                    img.width = 300;
                    img.height = 150;
                    img.setAttribute("id", "theImageId");
                    img.style.marginRight="10px";
                    img.className = "saveImg";


                    //Add each image to the containing div:
                    divimg.appendChild(img);


                    //Create close button: 
                    var close = document.createElement("img");
                    close.src="close.png";
                    close.width = 50;
                    close.height = 50;
                    close.border = 0;
                    close.style.position="relative";
                    close.style.bottom=115+"px";
                    close.style.right=40+"px";
                    close.className="closeButton";
                    //close.style.cssFloat="right";
                    //close.style.right= 0+"px";


                    var link = document.createElement("a");
                    link.href = "#";

                                            //Make the close button image a link:
                    link.appendChild(close);

                    link.nameIndex = x;

                    //When the close button is clicked:
                    link.onclick = (function (x) {
                    var imageNum = this.nameIndex;
                    alert("You clicked to close image "+(imageNum+1));
                        //Remove the image:
                        array.splice(x,1);

                        alert("The length of this array is: "+array.length);
                        //Update localStorage:
                        localStorage.removeItem('images');

                                //Put array back in string form to store in local storage
                        array = JSON.stringify(array);

                        localStorage.setItem('images', array);
                           //Call the function again and pass it the updated array:
                        drawImages(array);
                    } );


                    //Add the close button the the containing div:
                    divimg.appendChild(link);
                    //divimg.appendChild(close);

    } //End Loop

} //End drawImages();

I really can't get this working. I can't find the issue & would like/appreciate any help as it's really annoying me at this stage. >(

I do realise that this was posted already but felt the need to explain and comment it a little further.

If it isn't clear what the issue is I will answer any questions you have about the code.

original Q: Updating an array on button click Javascript

76484 · Accepted Answer · 2014-03-13 00:13:55Z

1

Your problem is that you are not using a single array. Clicking save adds elements to the global theImages array, but theImages isn't passed to drawImages. Clicking a.close removes elements from the 'array' array, but it doesn't alter theImages. So theImages gets added to when you click save, but never removed from. You should probably pursue a solution where you don't transform your array into a string and then back again, but to get your code working with the least amount of work, I think simply assigning 'array' to theImages will do the trick:

function drawImages(array){

    //Convert the array back into array form:
    array = JSON.parse(array);
    theImages = array;
    /* ... */
}

answered Mar 13, 2014 at 0:13

76484

9,0013 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

SparoHawk Over a year ago

That is correct. The save function is the culprit here.

Anon Omus Over a year ago

I managed to get it working by changing the save function to have the theImages array inside the function. It works fine on my own machine in chrome but only works on certain versions of chrome when I try to open it on other PC's & doesn't work at all in firefox.

SparoHawk Over a year ago

Did you check the Google Chrome and Firefox versions? Might be a stupid question, but even though local storage has been around sometime it's not present on every version of the browsers.

Anon Omus Over a year ago

I'm currently trying it in chrome version: 33.0.1750.146. It works on my own PC which would probably be running an older version of chrome

Anon Omus Over a year ago

Funnily enough. Other parts of the page requiring localStorage are working fine.

|

SparoHawk · Accepted Answer · 2014-03-12 22:02:41Z

0

Try changing the way you save the information to local storage again.

The code under this line:

alert("You clicked to close image "+(imageNum+1));

Test this:

var imgArr = JSON.parse(localStorage.getItem('images'));
imgArr.splice(x, 1);

alert("The length of this array is: "+imgArr.length);

localStorage.removeItem('images');

localStorage.setItem('images', JSON.stringify(imgArr));

drawImages(imgArr);

Please let me know.

What I assume is the fact that by using array as the variable it is always accessing an already existing variable that contains the full list of images. Therefore a splice() might be removing the current image being removed, but "restoring" any other previously removed.

If you are passing x to the function (the image index), what is the use of doing var imageNum = this.nameIndex;. Might as well just use x: alert("You clicked to close image "+(x+1));.

answered Mar 12, 2014 at 22:02

SparoHawk

5572 silver badges10 bronze badges

2 Comments

Anon Omus Over a year ago

Hey SparoHawk, thanks for the reply. I tried your code but still having the same issue. It deletes on screen but when I add an element again it redisplays the deleted images. What the **** is going on

SparoHawk Over a year ago

Could you edit your code to provide the HTML that goes with the JavaScript?

Collectives™ on Stack Overflow

Assistance with an unsolved javascript issue

2 Answers 2

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related