使用onclick javascript关闭按钮时出错,可能在引号/单/双

时间:2018-01-10 03:21:29

标签: javascript

我有一个小的问题跟踪器,它使用一些函数来保存和获取localStorage的问题,所有这些工作正常,使用Chance uid生成器生成id。但是,在获取之前生成的id之后,在制作第三个函数以将状态设置为关闭时。在控制台中我收到如下错误。

(function(event){setStatusClosed(fdf7622a-8738-5384-98b6-9ff9c47b2be0)
}) invalid or unexpected token. index.html:1

使用onclick通过fetchIssues()函数中生成的关闭按钮运行该函数。

前两个函数fetchIssues()和saveIssues()已经按预期工作,没有错误,正确地将数组转换为推送时的JSON对象,然后返回到检索上的数组,但是当我尝试setStatusClosed函数时,我得到了错误。当使用其他uid生成器方法时,我也会遇到类似的错误,因此我决定坚持使用Chance。我似乎无法找到错误,日志只是指向上面粘贴的事件。代码在

之下
/*jslint browser:true */

//Fetch submitted issues or the status of localStorage
function fetchIssues() {
     "use strict";       
var i = 0;
var issues = JSON.parse(localStorage.getItem("issues"));
var issueList = document.querySelector('#issueList');

    issueList.innerHTML = " ";

if(issues !== null) {
    for(i = 0; i < issues.length; i++) {
    var id = issues[i].id,
        desc = issues[i].description,
        severity = issues[i].severity,
        assignedTo = issues[i].assignedTo,
        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>";
}
console.log(issues);
} else {
issueList.innerHTML = "<h6 class='text-center'>There are no issues at present</h6>";    
}
}

//Save a submitted issue
function saveIssue(e) {
    "use strict";
var chance = new Chance();
var issueDesc = document.querySelector("#issueDescInput").value,
    issueSeverity = document.querySelector("#issueSeverityInput").value,
    issueAssignedTo = document.querySelector("#issueAssignedToInput").value,
    issueStatus = "Open",
    issueId = chance.guid(),
    issues = [],
    issue = {
    id: issueId,
    description: issueDesc,
    severity: issueSeverity,
    assignedTo: issueAssignedTo,
    status: issueStatus
};
//Check if entry already there
if(localStorage.getItem("issues") === null) {
//Push the issue object to issues array
issues.push(issue);
//Set the new issues array as a converted JSON object to localStorage
localStorage.setItem("issues", JSON.stringify(issues));
} else {
//Request the issues object and convert to array
issues = JSON.parse(localStorage.getItem("issues"));
//Push new object to issues array
issues.push(issue);
//Set the new issues array as a converted JSON object to localStorage
localStorage.setItem("issues", JSON.stringify(issues));
}
//Reset submit element
document.querySelector("#issueInputForm").reset();
//Run fetchIssue to reflect the new item
fetchIssues();
//Stop default submit
e.preventDefault();
}
//Submit event for the saveIssue function
document.querySelector("#issueInputForm").addEventListener("submit", saveIssue);

//Set the issue status to closed
function setStatusClosed(id) {
var i;
var issues = JSON.parse(localStorage.getItem("issues"));
for(i = 0; i < issues.length; i++) {
    if(issues[i].id == id) {
        issues.status = "Closed";
    }
}
localStorage.setItem("issues", JSON.stringify(issues));
fetchIssues();
}

Closure compiler

中的所有内容都很好

enter image description here

只有在按下关闭问题按钮时才会出现错误,所以有人知道为什么在onclick事件中没有正确调用该函数(通过innerHTML方法生成)?

欢迎任何提示,谢谢

更新,我尝试在生成的innerHTML中更改调用以转义引号,但现在我得到一个稍微不同的错误,即没有为onclick事件定义setStatusClosed()。(我也删除了Bootstrap所以它只是使用了lib js文件。),因此onclick调用似乎有错误。

issueList.innerHTML += '<div class="well">' +
                        '<h6>Issue ID: ' + id + '</h6>' +
                        '<p><span class="Label label-info">' + status + '</span></p>' +
                        '<h4>' + desc + '</h4>' +
                        '<p><span class="icon icon-clock"></span> ' + severity + '</p>' +
                        '<p><span class="icon icon-user"></span> ' + assignedTo + '</p>' +
                        '<a href="#" onclick="setStatusClosed(\''+ id +'\')" class="button button-outline">Close</a>' +
                        '<a href="#"" onclick="deleteIssue(\''+ id +'\')" class="button">Delete</a>' +
                        '</div>';

enter image description here

0 个答案:

没有答案