Question

我正在尝试创建一个问题跟踪器并开始使用2个函数，第一个是saveIssue()，它在提交时通过eventListener将提交的问题保存到localStorage，第二个是fetchIssues()，它可以解决任何问题来自localStorage并将它们输出到div id＆＃34; issueList＆＃34;使用body.onload fetchIssues()。我控制台记录fetchIssues()的输出OK但是如果我尝试设置issueList div的innerHTML同时出现错误，＆＃34;无法设置字符串的属性innerHTML，此消息会立即出现在加载并阻止任何运行。肯定有一个id为＆＃34; issueList＆＃34;在html文件中。我的2个函数的代码如下。

    /*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 welcome, Thanks

Answer 1

在第一行中，您将元素innerHTML (string)分配给issueList变量，然后您尝试更改innerHTML那个字符串。

这不起作用：

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

您基本上是说issueList收到了收到空字符串的元素innerHTML。

你应该这样做：

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

Answer 2

消息属实：您的行

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

使issueList（变量，而不是div）成为字符串，因为最后是= ''。

无法创建属性＆＃34; innerHTML＆＃34;在字符串上

2 个答案: