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

【问题标题】：Why my button is not working in the input form?为什么我的按钮在输入表单中不起作用？
【发布时间】：2018-12-06 09:32:02
【问题描述】：

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

这是我的 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>

【问题讨论】：

type="button" 不提交表单
也可能是因为您阻止了表单的默认操作：e.preventDefault();

标签： javascript html

【解决方案1】：

正如@epascarello 已经提到的

type="button" 不提交表单

所以把type改成submit

<button type="submit" class="btn btn-primary">Add</button>

来自MDN

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

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

【讨论】：

【解决方案2】：

在你的代码 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>

【讨论】：

【解决方案3】：

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

由于 type="button" 的元素无法与提交事件关联，已将类型更改为提交。
在 fetchIssue 函数中添加了 null 检查，以便在没有问题时代码不会中断。
更正了 saveIssue 函数中的错字 - document.getElementById('issueAssigntedToInput') 到 document.getElementById('issueAssignedToInput')
当 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>

【讨论】：