堆栈内存溢出
  繁体   English   中英

为什么我的函数在 javascript 中不起作用？

[英]Why is my function not working in javascript?

 原文  2019-11-24 11:35:30  5   1    javascript/ html

问题描述

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body onload="fetchIssues()">
    <div class="container">
        <h1>JS IssuteTracker change <small>by CodingSmartWay.com</small></h1>
        <div class="jumbotron">
            <h3>Add New Issue:</h3>
            <form id="issueInputForm">
                <div class="form-group">
                    <label for="issueDescInput">Description</label>
                    <input type="text" class="form-control" id="issueDescInput" placeholder="Describe the issue ...">
                </div>
                <div class="form-group">
                    <label for="issueSeverityInput">Severity</label>
                    <select id="issueSeverityInput" class="form-control">
                        <option value="Low">Low</option>
                        <option value="Medium">Medium</option>
                        <option value="High">High</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="issueAssignedToInput">Assigned To</label>
                    <input type="text" class="form-control" id="issueAssignedToInput" placeholder="Enter responsible ...">
                </div>
                <button type="submit" class="btn btn-primary">Add</button>
                </form>
        </div>
        <div class="col-lg-12">
            <div id="issuesList">
            </div>
        </div>
        <div class="footer">
            <p>&copy CodingTheSmartWay.com</p>
        </div>
    </div>
<script src="app.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

document.getElementById("issueInputForm").addEventListener("submit", saveIssue);

function saveIssue(e) {
  var issueDesc = document.getElementById("issueDescInput").value;
  var issueSeverity = document.getElementById("issueSeverityInput").value;
  var issueAssignedTo = document.getElementById("issueAssignedToInput").value;
  var issueId = chance.guid();
  var issueStatus = "Open";

  var issue = {
    id: issueId,
    description: issueDesc,
    severity: issueSeverity,
    assignedTo: issueAssignedTo,
    status: issueStatus
  };

  if (localStorage.getItem("issues") == null) {
    var issues = [];
    issues.push(issue);
    localStorage.setItem("issues", JSON.stringify(issues));
  } else {
    var issues = JSON.parse(localStorage.getItem("issues"));
    issues.push(issue);
    localStorage.setItem("issues", JSON.stringify(issues));
  }

  document.getElementById("issueInputForm").reset();

  fetchIssues();

  e.preventDefault();
}

function fetchIssues() {
  var issues = JSON.parse(localStorage.getItem("issues"));
  var issuesListe = document.getElementById("issuesList");

  issuesListe.innerHTML = "";

  for (var i = 0; i < issues.length; i++) {
    var id = issues[i].id;
    var desc = issues[i].description;
    var severity = issues[i].severity;
    var assignedTo = issues[i].assignedTo;
    var status = issues[i].status;

    issuesList.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>";
  }
}

我检查了 javascript 文件中<body onload="fetchIssues()">和for (var i = 0; i < issues.length; i++)的函数是否存在问题。

我想制作一个 javascript 问题跟踪器应用程序，每次单击提交按钮时，javascript 中的功能都不起作用。

1 个解决方案

解决方案1
 0  2019-11-24 12:22:33

 var virtualLocalStorage = null; var id = 1; document.getElementById("issueInputForm").addEventListener("submit", saveIssue); function saveIssue(e) { var issueDesc = document.getElementById("issueDescInput").value; var issueSeverity = document.getElementById("issueSeverityInput").value; var issueAssignedTo = document.getElementById("issueAssignedToInput").value; // var issueId = chance.guid(); // this throws an error var issueId = id++; var issueStatus = "Open"; var issue = { id: issueId, description: issueDesc, severity: issueSeverity, assignedTo: issueAssignedTo, status: issueStatus }; // if (localStorage.getItem("issues") == null) { if(virtualLocalStorage == null) { var issues = []; issues.push(issue); // localStorage.setItem("issues", JSON.stringify(issues)); virtualLocalStorage = JSON.stringify(issues); } else { // var issues = JSON.parse(localStorage.getItem("issues")); var issues = JSON.parse(virtualLocalStorage); issues.push(issue); // localStorage.setItem("issues", JSON.stringify(issues)); virtualLocalStorage = JSON.stringify(issues); } document.getElementById("issueInputForm").reset(); e.preventDefault(); // move this here fetchIssues(); } function fetchIssues() { // var issues = JSON.parse(localStorage.getItem("issues")); var issues = JSON.parse(virtualLocalStorage); var issuesListe = document.getElementById("issuesList"); issuesListe.innerHTML = ""; for (var i = 0; i < (issues||[]).length; i++) { var id = issues[i].id; var desc = issues[i].description; var severity = issues[i].severity; var assignedTo = issues[i].assignedTo; var status = issues[i].status; issuesList.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>"; } }
 <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body onload="fetchIssues()"> <div class="container"> <h1>JS IssuteTracker change <small>by CodingSmartWay.com</small></h1> <div class="jumbotron"> <h3>Add New Issue:</h3> <form id="issueInputForm"> <div class="form-group"> <label for="issueDescInput">Description</label> <input type="text" class="form-control" id="issueDescInput" placeholder="Describe the issue ..."> </div> <div class="form-group"> <label for="issueSeverityInput">Severity</label> <select id="issueSeverityInput" class="form-control"> <option value="Low">Low</option> <option value="Medium">Medium</option> <option value="High">High</option> </select> </div> <div class="form-group"> <label for="issueAssignedToInput">Assigned To</label> <input type="text" class="form-control" id="issueAssignedToInput" placeholder="Enter responsible ..."> </div> <button type="submit" class="btn btn-primary">Add</button> </form> </div> <div class="col-lg-12"> <div id="issuesList"> </div> </div> <div class="footer"> <p>&copy CodingTheSmartWay.com</p> </div> </div> <script src="app.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body>

解决方案2
 -4  2019-11-24 11:38:01

尝试使用此工具，希望对您有所帮助。

[ https://validatejavascript.com/]

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为什么我在Javascript中的功能不起作用？ 为什么我的charAt功能不能用于我的javascript？ 为什么我的 Function 在工作和不工作之间交替 Javascript 为什么我的javascript function有时不能用 为什么我的切换可见性 javascript 功能不起作用？ 为什么我的javascript regexp测试功能不起作用？ 为什么我的onload函数无法在JavaScript中使用？ JavaScript：为什么我的过滤器功能不起作用？ 为什么我的 Javascript 功能不能正常工作？ 为什么我的JavaScript函数不能在所有按钮上正常工作？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM