为什么我的按钮在输入表单中不起作用？

时间：2018-06-27 13:07:04

标签： javascript html

上面的代码的预期行为是当我单击“添加”按钮时，问题已创建并显示在按钮下方。问题是，什么也没有发生。我一直在尝试在网上寻找答案，但是没有运气。知道怎么了吗？

这是我的index.html和JavaScript：

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('issueAssigntedToInput').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();

    fetchIssue();
    e.preventDefault();
}

function setStatusClosed(id) {
    var issues = JSON.parse(localStorage.getItem('issues'));

    for (var i = 0; i < issues.length; i++)
        if (issues[i].id === id)
            issues[i].status = 'Closed';

    localStorage.setItem('issues', JSON.stringify(issues));

    fetchIssue();
}

function deleteIssue(id) {
    var issues = JSON.parse(localStorage.getItem('issues'));

    for (var i = 0; i < issues.length; i++)
        if (issues[i].id === id)
            issues.splice(i, 1);

    localStorage.setItem('issues', JSON.stringify(issues));

    fetchIssue();
}

function fetchIssue() {
    var issues = JSON.parse(localStorage.getItem('issues'));
    var issuesList = document.getElementById('issuesList');

    issuesList.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>';
    }
}
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>JS Issue Tracker</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body onload="fetchIssue()">
    <div class="container">
        <h1>JS IssueTracker</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="button" class="btn btn-primary">Add</button>
    </form>
    <div class="col-lg-12">
        <div id="issuesList"></div>
    </div>
    <div class="footer">
        <p>&copy; Ida Djurhuus</p>
    </div>
    
    <script src="http://chancejs.com/chance.min.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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    <script src="main.js"></script>
</body>
</html>

3 个答案:

答案 0 :(得分：0)

@epascarello已经提到

  

type =“ button”不提交表单

因此将scanResult.getScanRecord().getBytes() 更改为type 

submit

来自MDN

  

按钮：该按钮没有默认行为。它可以具有与元素的事件相关联的客户端脚本，这些脚本在事件发生时触发。

     

提交：该按钮将表单数据提交到服务器。如果未指定该属性，或者该属性动态更改为空值或无效值，则为默认设置。

答案 1 :(得分：0)

您的代码2问题

 1) change type="button" to type="submit"
    2) var issueAssignedTo = document.getElementById('issueAssigntedToInput').value; 
    chaneg this line in id 
var issueAssignedTo = document.getElementById('issueAssignedToInput').value; 


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


function saveIssue(e) {
debugger;
    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();

    fetchIssue();
    e.preventDefault();
   }


function setStatusClosed(id) {
    var issues = JSON.parse(localStorage.getItem('issues'));


    for (var i = 0; i < issues.length; i++) {
        if (issues[i].id === id) {
            issues[i].status = 'Closed';
        }

    }

    localStorage.setItem('issues', JSON.stringify(issues));

    fetchIssue();
}

function deleteIssue(id) {
    var issues = JSON.parse(localStorage.getItem('issues'));


    for (var i = 0; i < issues.length; i++) {
        if (issues[i].id === id) {
            issues.splice(i, 1);
        }

    }

    localStorage.setItem('issues', JSON.stringify(issues));

    fetchIssue();
}




function fetchIssue() {
    var issues = JSON.parse(localStorage.getItem('issues'));
    var issuesList = document.getElementById('issuesList');

    issuesList.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>';



    }


}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <div class="container">
        <h1>JS IssueTracker</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 class="col-lg-12">
        <div id="issuesList">
        </div>

    </div>
    <div class="footer">
        <p>&copy; Ida Djurhuus</p>


    </div>
    

    
    <script src="http://chancejs.com/chance.min.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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

答案 2 :(得分：0)

对您的代码进行了一些更改：

  1. 由于type =“ button”的元素无法与Submit事件关联，因此将类型更改为Submit。

  2. 在fetchIssue函数中添加了null检查，以使代码在没有问题时不会中断。

  3. 更正了saveIssue函数中的错字-document.getElementById（'issueAssigntedToInput'）到document.getElementById（'issueAssignedToInput'）

  4. 当localStorage.getItem（'issues'）为null时，在saveIssue函数中声明变量“ issues”。

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
    };

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


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

    fetchIssue();
    e.preventDefault();
   }


function setStatusClosed(id) {
    var issues = JSON.parse(localStorage.getItem('issues'));


    for (var i = 0; i < issues.length; i++) {
        if (issues[i].id === id) {
            issues[i].status = 'Closed';
        }

    }

    localStorage.setItem('issues', JSON.stringify(issues));

    fetchIssue();
}

function deleteIssue(id) {
    var issues = JSON.parse(localStorage.getItem('issues'));


    for (var i = 0; i < issues.length; i++) {
        if (issues[i].id === id) {
            issues.splice(i, 1);
        }

    }

    localStorage.setItem('issues', JSON.stringify(issues));

    fetchIssue();
}




function fetchIssue() {
    var issues = JSON.parse(localStorage.getItem('issues'));
    if(typeof issues !== 'undefined' && issues !== null) {

    var issuesList = document.getElementById('issuesList');

    issuesList.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>';

        }

    }


}
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>JS Issue Tracker</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body onload="fetchIssue()">
    <div class="container">
        <h1>JS IssueTracker</h1>
    </div>
    <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 class="col-lg-12">
        <div id="issuesList">
        </div>

    </div>
    <div class="footer">
        <p>&copy; Ida Djurhuus</p>


    </div>
    

    
    <script src="http://chancejs.com/chance.min.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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>



    <script src="main.js"></script>
</body>
</html>

相关问题
最新问题