I am trying to create a Issue Tracker and have started with 2 functions, the first is saveIssue() which saves a submitted issue to localStorage via eventListener on submit, the second is fetchIssues() which fetches any issues from localStorage and outputs them to the div id "issueList" using body.onload fetchIssues(). I console log the output of fetchIssues() OK but if I try to set the innerHTML of the issueList div at the same time I get an error, "cannot set property innerHTML of string, this message appears immediately on load and stops anything running. There is definitely a div with id of "issueList" in the html file. My code for the 2 functions is below.

    /*jslint browser:true */
document.querySelector("#issueInputForm").addEventListener("submit", saveIssue);
function saveIssue(e) {
    "use strict";        
var issueDesc = document.querySelector("#issueDescInput").value,
    issueSeverity = document.querySelector("#issueSeverityInput").value,
    issueAssignedTo = document.querySelector("#issueAssignedToInput").value,
    issueId = chance.guid(),
    issueStatus = "Open",
    issues = [],
    issue = {
    id: issueId,
    description: issueDesc,
    severity: issueSeverity,
    assignedTo: issueAssignedTo,
    status: issueStatus
};
if(localStorage.getItem("issues") === null) {
issues.push(issue);
localStorage.setItem("issues", JSON.stringify(issues));
console.log("No issues");
} else {
issues = JSON.parse(localStorage.getItem("issues"));
issues.push(issue);
localStorage.setItem("issues", JSON.stringify(issues));
}
document.querySelector("#issueInputForm").reset();
fetchIssues();
e.preventDefault();
}
function fetchIssues() {
     "use strict";       
var i,
    issueList = document.querySelector("#issueList").innerHTML = '',
    issueAssignedTo = document.querySelector("#issueAssignedToInput").value,
    assignedTo = issueAssignedTo,
    issues = JSON.parse(localStorage.getItem("issues")),    
    issuesListed = document.querySelector("#issueList");
    if(issues) {
    for(i = 0; i < issues.length; i++) {
    console.log(issues);
    var id = issues[i].id,
    desc = issues.description,
    severity = issues[i].severity,
    status = issues[i].status;
    issueList.innerHTML += "<div class='well'>" +
                        "<h6>Issue ID: " + id + "</h6>" +
                        "<p><span class='Label label-info'>" + status + "</span></p>" +
                        "<h3>" + desc + "</h3>" +
                        "<p><span class='glyphicon glyphicon-time'></span>" + severity + "</p>" +
                        "<p><span class='glyphicon glyphicon-user'></span>" + assignedTo + "</p>" +
                        "<a href='#' onclick='setStatusClosed(\'"+id+"\')' class='btn btn-warning'>Close</a>" +
                        "<a href='#' onclick='deleteIssue(\'"+id+"\')' class='btn btn-danger'>Delete</a>" +
                        "</div>";


}
} else {

console.log(issuesListed,"No Issues Listed");     
}
}

Any tips on this are wele, Thanks

I am trying to create a Issue Tracker and have started with 2 functions, the first is saveIssue() which saves a submitted issue to localStorage via eventListener on submit, the second is fetchIssues() which fetches any issues from localStorage and outputs them to the div id "issueList" using body.onload fetchIssues(). I console log the output of fetchIssues() OK but if I try to set the innerHTML of the issueList div at the same time I get an error, "cannot set property innerHTML of string, this message appears immediately on load and stops anything running. There is definitely a div with id of "issueList" in the html file. My code for the 2 functions is below.

    /*jslint browser:true */
document.querySelector("#issueInputForm").addEventListener("submit", saveIssue);
function saveIssue(e) {
    "use strict";        
var issueDesc = document.querySelector("#issueDescInput").value,
    issueSeverity = document.querySelector("#issueSeverityInput").value,
    issueAssignedTo = document.querySelector("#issueAssignedToInput").value,
    issueId = chance.guid(),
    issueStatus = "Open",
    issues = [],
    issue = {
    id: issueId,
    description: issueDesc,
    severity: issueSeverity,
    assignedTo: issueAssignedTo,
    status: issueStatus
};
if(localStorage.getItem("issues") === null) {
issues.push(issue);
localStorage.setItem("issues", JSON.stringify(issues));
console.log("No issues");
} else {
issues = JSON.parse(localStorage.getItem("issues"));
issues.push(issue);
localStorage.setItem("issues", JSON.stringify(issues));
}
document.querySelector("#issueInputForm").reset();
fetchIssues();
e.preventDefault();
}
function fetchIssues() {
     "use strict";       
var i,
    issueList = document.querySelector("#issueList").innerHTML = '',
    issueAssignedTo = document.querySelector("#issueAssignedToInput").value,
    assignedTo = issueAssignedTo,
    issues = JSON.parse(localStorage.getItem("issues")),    
    issuesListed = document.querySelector("#issueList");
    if(issues) {
    for(i = 0; i < issues.length; i++) {
    console.log(issues);
    var id = issues[i].id,
    desc = issues.description,
    severity = issues[i].severity,
    status = issues[i].status;
    issueList.innerHTML += "<div class='well'>" +
                        "<h6>Issue ID: " + id + "</h6>" +
                        "<p><span class='Label label-info'>" + status + "</span></p>" +
                        "<h3>" + desc + "</h3>" +
                        "<p><span class='glyphicon glyphicon-time'></span>" + severity + "</p>" +
                        "<p><span class='glyphicon glyphicon-user'></span>" + assignedTo + "</p>" +
                        "<a href='#' onclick='setStatusClosed(\'"+id+"\')' class='btn btn-warning'>Close</a>" +
                        "<a href='#' onclick='deleteIssue(\'"+id+"\')' class='btn btn-danger'>Delete</a>" +
                        "</div>";


}
} else {

console.log(issuesListed,"No Issues Listed");     
}
}

Any tips on this are wele, Thanks

• javascript
• html

Share Improve this question Follow edited Jan 9, 2018 at 11:41 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Jan 9, 2018 at 11:35 minimallinuxminimallinux 13933 silver badges1010 bronze badges 1

• Update on this, while a submission is being console logged as an Object, it's not getting to localStorage and there is an error on the setting of the inner HTML a few lines down, stating it is not an Object? Thanks – minimallinux Commented Jan 9, 2018 at 11:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

In the first line, you're assigning the element's innerHTML (string) to the issueList variable, and then you're trying to change the innerHTML of that string.

This will not work:

                                     //this will be assigned ↓↓↓.
issueList = document.querySelector("#issueList").innerHTML = '',
issueAssignedTo = document.querySelector("#issueAssignedToInput").value;
issueList.innerHTML += "<div class='well'>" +

You're basically saying that issueList receives the element's innerHTML who receives an empty string.

You should do this instead:

issueList = document.querySelector("#issueList"),
issueAssignedTo = document.querySelector("#issueAssignedToInput").value;
issueList.innerHTML = '';
issueList.innerHTML += "<div class='well'>" + ...

The message is true: your line

issueList = document.querySelector("#issueList").innerHTML = ''

makes issueList (the variable, not the div) a string, because of the = '' at the end.