How to make the contents of multiple div class elements editable

Question

My objective is to make the contents of multiple div elements editable either with all of the same div class name, or with different class names. I am aware of the contenteditable attribute but my problem is being able to save it using java-script so that when the page reloads, the edited content is saved and displayed. I have been trying to follow the tutorial on this website...

http://www.developerdrive.com/2012/06/allowing-users-to-edit-text-content-with-html5/

So far i have separated the java-script code into a different file called mailscript.js I included the file near the top of the html5 file using... I also changed the ... document.getElementById to... document.getElementsByClassName in the Java-script file that a made. I don't really know where to go from here. In short, the edits fail to save. Her are the files...

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> 
<title>Package Information</title>
<script type="text/javascript" src="mailscript.js"></script>
<link rel="stylesheet" href="mailstyle.css">
<link rel="icon"
      type="image/ico"
      href="favicon.ico">
</head>
<body onload="checkEdits()">
<div id="wrapper">
    <div id="header">
      <header><h1>Bison Mail</h1></header>
        </div>
    <hr>
    <br id="clearleft">

    <div id="leftcolumn">
    <hr>
            <ul class="navbar">
                        <li><a href="staffhome.html">Home</a></li>
            <li><a href="staffinfo.html">Packages</a></li>
            <li><a href="contactus.html">Contact Us</a></li>
            <li><a href="mailhome.html">Sign-Out</a></li>
            </ul>
    <hr>
    </div>

        <div id="rightcolumn">
            <div class="container">
                <div class="table-row">
                    <div class="heading">Name:</div>
                    <div class="name" contenteditable="true">Meshech Price</div>
                </div>
                <div class="table-row">
                    <div class="heading">Date Received:</div>
                    <div class="dateRecieved" contenteditable="true">11/1/2014</div>
                </div>
                <div class="table-row">
                    <div class="heading">Date of Pickup:</div>
                    <div class="dateOfPickup" contenteditable="true">None</div>
                </div>
                <div class="table-row">
                    <div class="heading">ID:</div>
                    <div class="ID" contenteditable="true">N/A</div>
                </div>
                <div class="table-row">
                    <div class="heading">E-mail:</div>
                    <div class="email" contenteditable="true"><address><a href="shackster3773@yahoo.com">shackster3773@yahoo.com</a></address></div>
                </div>
                <div class="table-row">
                    <div class="heading">E-mail Sent:</div>
                    <div class="emailSent" contenteditable="true">Sent</div>
                </div>
                <div class="table-row">
                    <div class="heading">Signature:</div>
                    <div class="signature" contenteditable="true">N/A</div>
                </div>
            </div>
            <hr>
        <input type="button" value="save my edits" onclick="saveEdits()"/>
        <input type="button" value="add package" onclick="addElement()"/>
        <br>
    <hr>
            <div id="footer">
        <br>
        <p>By: Meshech &copy;</p>
            </div>
        </div>



</div>    



</body>
</html>

and for the java-script file

function saveEdits() {

//get the editable element
var editElem = document.getElementsByClassName("name");
//display.write(editElem);
//get the edited element content
var userVersion = editElem.innerHTML;
//display.write(userVersion);
//save the content to local storage
localStorage.userEdits = userVersion;

//write a confirmation to the user
document.getElementsByClassName("update").innerHTML="Edits saved!";

}

function checkEdits() {

//find out if the user has previously saved edits
if(localStorage.userEdits!==null)
document.getElementsByClassName("name").innerHTML = localStorage.userEdits;
}

Any help would be Greatly appreciated. Thanks in advance!

perhaps you have a good reason but perhaps you should look at jQuery - if you're doing lots of DOM manipulation it will save you a lot of time. Getting a list of elements by class name is simply `$('.editable')`... — Chris Moutray, Nov 23 '14 at 08:16
Agreed on jQuery, but all the learning's about localstorage apply in either case — Simon H, Nov 23 '14 at 08:44
@Meshech I've removed my answer because I don't think it will help you - I suggest you work through the learn tutorials sections from w3schools for HTML, Javascript, and CSS (http://www.w3schools.com) - People will bash it because w3school can sometimes give wrong information, but the tutorials are good - use MDN for absolute reference (https://developer.mozilla.org) — Chris Moutray, Nov 23 '14 at 09:23

Simon H · Accepted Answer · 2014-11-23T09:03:59.530

Try this. Your divs need to look like <div id="name" class="edit" contenteditable="true">Meshech Price</div>

HTML

<div class="container">
        <div class="table-row">
            <div class="heading">Name:</div>
            <div id="name" class="edit" contenteditable="true">Meshech Price</div>
        </div>
        <div class="table-row">
            <div class="heading">Date Received:</div>
            <div id="dateRecieved" class="edit" contenteditable="true">11/1/2014</div>
        </div>

Javascript

function saveEdits() {
    var editElem = document.getElementsByClassName("edit");
    localStorage.userEdits = {}
    Array.prototype.forEach.call(editElem, function(e) {
            console.log(e.id)
            localStorage.setItem([e.id], e.innerHTML);
        });

    document.getElementsByClassName("update").innerHTML="Edits saved!";

}

function checkEdits() {

   if(localStorage.userEdits) {
      var editElem = document.getElementsByClassName("edit");
      Array.prototype.forEach.call(editElem, function(e) {
                console.log(e.id)
                e.innerHTML = localStorage.getItem(e.id);
            });
        }
}

Are the divs supposed to all have different id names and different class names? — Meshech, Nov 23 '14 at 08:32

How to make the contents of multiple div class elements editable

1 Answers1