CODEWITHSUNDEEP
javascript
th0r23
th0r23

Reputation: 11

Dynamically generated buttons passing variable value in onclick event to deeper nested functions

I'm working on creating a save dialog for a browser based game and I'm having a bit of an issue. I've got saving and listing the saves down, but I'm having an issue with loading, overwriting, and deleting. I've got the save entries created dynamically, along with the buttons for manipulating each save. Clicking any of the buttons will open a confirmation dialog, upon which clicking yes will execute the actual action. My issue lies with getting each operation to actually function on the relevant save. The code I have so far looks something like this:

var saveNum, buttonType;
function loadSaveList(){
    saves = JSON.parse(localStorage.getItem("game_saves"));
    for(var a=0; a < saves.length; a++){
        var entry = document.createElement("div");
        var buttons = document.createElement("div");
        var overwriteB = document.createElement("input");
        var deleteB = document.createElement("input");
        var loadB = document.createElement("input");
        overwriteB.type = "button";
        deleteB.type = "button";
        loadB.type = "button";
        overwriteB.onclick = function(){buttonType = 0; saveNum = function(){return a;}; saveAlert();};
        deleteB.onclick = function(){buttonType = 1; saveNum = function(){return a;}; saveAlert();};
        loadB.onclick = function(){buttonType = 2; saveNum = function(){return a;}; saveAlert();};
        buttons.appendChild(overwriteB);
        buttons.appendChild(deleteB);
        buttons.appendChild(loadB);
        entry.appendChild(buttons);
        document.getElementById("saveEntries").appendChild(entry);}}
function saveAlert(){
    switch(buttonType){
        case 0:
            document.getElementById("alertYes").onclick = overwriteButton;
            document.getElementById("alertNo").onclick = function(){/*styling to close alert*/}; break;
        case 1:
            document.getElementById("alertYes").onclick = deleteButton;
            document.getElementById("alertNo").onclick = function(){/*styling to close alert*/}; break;
        case 2:
            document.getElementById("alertYes").onclick = loadButton;
            document.getElementById("alertNo").onclick = function(){/*styling to close alert*/}; break;}}
function overwriteButton(){
    unloadSaveList();
    saves.splice(saveNum, 1, currentSave);
    localStorage.setItem("game_saves", JSON.stringify(saves));
    loadSaveList();}
function deleteButton(){
    unloadSaveList();
    saves.splice(saveNum, 1);
    localStorage.setItem("game_saves", JSON.stringify(saves));
    loadSaveList();}
function loadButton(){
    var tempSave = saves.slice(saveNum, saveNum+1);
    currentSaveLoad(tempSave);
    unloadSaveList();
    saves = [];}

My intention was to use saveNum to store the value of a so the bottom 3 functions know which save to operate on. I figured a closure was the way to go to get the value all the way through, but I'm honestly not quite sure how to implement it in a way that would work. I'm looking primarily for a solution in vanilla js, but failing that, an alternate way of approaching the problem would be welcome.

Upvotes: 0

Views: 37

Answers (1)

th0r23
th0r23

Reputation: 11

Man, it turns out I was so close. I made 2 small changes:

I changed var to let in the for loop constructor: 

for(let a=0; a < saves.length; a++){

And I changed saveNum to accept the value of a itself:

loadB.onclick = function(){buttonType = 2; saveNum = a; saveAlert();};

Thanks to Hunter Frazier for pointing me in the right direction.

Upvotes: 1

Related Questions