3

I'm trying to create a list which I can edit/update. I'll need to be able to store the list information in a variable of some sort and display the information on a HTML page.

My attempt is in the jsbin below.

JSBIN

https://jsbin.com/luxobineze/edit?html,js,console,output

So with that code, I'd like to:

  • Add names by filling in the form and clicking "Add Name"
  • Click [Edit] which will fill the form with the name that is to be edited
  • Click Update to update the global variable "names" (If I can do this, then I should be able to update the HTML's "List of Names" as well)

I'm not sure what to do in the updateName function since I'm not sure how to pass the relevant arguments into it in order to update the correct list item. Do I need to use more global variables to keep track of the list item that's being edited? Or is there a better, more standard way of coding this?

The code in the jsbin is here:

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
Name: <input type="text" id="name-input"><br>
<button id="add-name" class="button">Add Name</button>
<button id="update" class="button">Update</button>

<div id="list">List of Names</div>
</body>
</html>

JavaScript

// global variable storing the list of names
var names = [];

function addName() {
    var name = document.getElementById("name-input").value;
    var list = document.getElementById("list");

    if(name) {
        names.push("name");

        var wrapper = document.createElement("div")
        wrapper.setAttribute("id", name)

        var div_name = document.createElement("div");
        div_name.appendChild(document.createTextNode(name))

        var div_edit = document.createElement("div")
        div_edit.appendChild(document.createTextNode("[edit]"))
        div_edit.addEventListener("click", editName)

        wrapper.appendChild(div_name)
        wrapper.appendChild(div_edit)

        list.appendChild(wrapper)
    }
}

function editName() {
    // Fill the input box with the name that you want to edit
    var name = this.parentElement.getAttribute("id")
    document.getElementById("name-input").value = name;
}

function updateName() {
    var new_name = document.getElementById("name-input").value
    // How do I update the global variable "names"?

}

document.getElementById("add-name").addEventListener("click", addName)
document.getElementById("update").addEventListener("click", updateName)

Edit

I ended up using some global variables to keep track of which item was currently selected: https://jsbin.com/zupawesifu/1/edit?html,js,console,output

startwinkling
  • 95
  • 1
  • 10
  • See [Edit and save a file locally with JS](http://stackoverflow.com/questions/34034475/edit-and-save-a-file-locally-with-js), [Edit, save, self-modifying HTML document; format generated HTML, JavaScript](http://stackoverflow.com/questions/30563157/edit-save-self-modifying-html-document-format-generated-html-javascript) – guest271314 Dec 24 '16 at 04:40

1 Answers1

1

What it sounds like you're doing is building the most basic of applications, a CRUD app. (Create, Read, Update, Delete)

Storing your values in a local variable is not the most desirable way of doing this, unless of course that is your desired functionality.

You ask "is there a more standard way". A more common way would be to store your values in a database, or, in an even simpler scenario, you could store these values in a local .JSON file. This will allow you to use your application at any time, close the application, refresh, or any other number of things without losing your stored or edited values.

I won't code a full CRUD app for you here, but there are many tutorials and templates out there for your learning pleasure. Here is very basic one.

I hope this helps!

http://mrbool.com/creating-a-crud-form-with-html5-local-storage-and-json/26719

jmoneygram
  • 129
  • 1
  • 9
  • 1
    Yep, I'm trying to create a Chrome Extension for self learning purposes. I've been saving all the data in JSON format with Chrome's local storage API and I was getting stuck on how to edit/update items based on the user's interaction with the HTML page. I ended up using more global variables to keep track of the selected list item so the update function knows what to update: https://jsbin.com/luxobineze/4/edit?html,js,console,output Thanks for that link, I'll definitely look over it to learn the proper techniques for this. – startwinkling Dec 24 '16 at 05:09