使用提交按钮和输入键添加待办事项列表答案

【问题标题】：Using submit button and enter key to add to-do-list使用提交按钮和输入键添加待办事项列表
【发布时间】：2022-08-18 19:43:22
【问题描述】：

我正在做一个简单的待办事项列表来继续学习 JS，到目前为止我有两个我无法解决的问题，我想知道你们是否可以帮助我。

首先，我想使用按钮和回车键来添加任务，而不是仅仅按回车，我知道我可以使用表单和 preventDefault();方法，但我想探索其他选项，我可以通过将事件侦听器更改为 \'click\' 来使其工作，因为按钮是提交类型，但按 Enter 时不会添加文本。

其次，“没有待处理的任务。”消息div在没有添加任务时显示在开头，当添加任务时消失，到目前为止还可以，但是当我删除所有任务时，消息不会再次出现，也许我的逻辑以某种方式失败但无法弄清楚在哪里。

let board = document.querySelector(\'.to-do-board\');
let taskContainer = document.querySelector(\'.container-task\');
let taskbar = document.querySelector(\'.add-task\');
let button = document.querySelector(\'.add-btn\');
let noTasksMsg = document.querySelector(\'.message\');


taskbar.addEventListener(\'keypress\', (e) => {
    if (e.key === \'Enter\' && taskbar.value !== \'\') {
    
        if (taskContainer === null) {
            noTasksMsg.style.display = \'flex\';
        } else {
            noTasksMsg.style.display = \'none\';
        }

        let div = document.createElement(\'div\');
        div.className = \'item-task\';
        div.innerHTML = taskbar.value;
        taskContainer.insertAdjacentElement(\'beforeend\', div)

        let deleteButton = document.createElement(\'button\')
        deleteButton.className = \'deleteBtn\';
        deleteButton.textContent = \"X\";
        div.appendChild(deleteButton);

        taskbar.value = \'\';

        deleteButton.addEventListener(\'click\', () => {
            div.remove();
        })
    }
})

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    letter-spacing: 2px;
  }

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 15px;
}

.to-do-board {
    width: 500px;
    background: #88CCF1;
    border-radius: 10px;
}

.title {
    background: #3587A4;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

h1 {
    text-align: center;
    color: white;
    padding: .5em 0 .5em 0;
    font-size: 22px;
}

.inputs {
    display: flex;
    justify-content: center;
    margin: 1em;
}

.add-task {
    padding: .5em;
    width: 80%;
    margin-right: 1em;
}

.add-btn {
    padding: 0 1em 0 1em;
    font-size: large;
    font-weight: bolder;
    color: white;
    border: none;
    border-radius: 10px;
    background: #2D848A;
    cursor: pointer;
}

.add-btn:hover {
    background: #3587A4;
}

.container-task {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1em;
}

.item-task {
    display: flex;
    justify-content: space-between;
    background: #C1DFF0;
    width: 90%;
    border-radius: 10px;
    margin-bottom: 10px;
}

.deleteBtn {
    border: none;
    background: #d45151;
    width: 3em;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    height: 2.5em;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.deleteBtn:hover {
    background: rgb(235, 95, 95);
}

.message {
    text-align: center;
    padding: 1em;
    color: white;
    background: #63afb1;
}

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <meta charset=\"UTF-8\" lang=\"en\">
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <link rel=\"stylesheet\" href=\"styles.css\">
    <script src=\"main.js\" defer></script>
    <title>To-do List!</title>
</head>
<body>
    <div class=\"container\">
        <div class=\"to-do-board\">
            <div class=\"title\"><h1>To-Do List!</h1></div>
            <div class=\"inputs\">
                <input type=\"text\" placeholder=\"Add a task\" class=\"add-task\">
                <input type=\"submit\" value=\"+\" class=\"add-btn\">
            </div>
            <div class=\"container-task\">
                <div class=\"message\">There are no pending tasks.</div>
            </div>
        </div>
    </div>
</body>
</html>

非常感谢。

\"我想使用按钮和回车键来添加任务，而不是直接按回车\"- 那是什么意思？按住回车键，然后在这样做的同时按下按钮？
\"其次，当没有添加任务时，\"没有待处理的任务\"消息 div 显示在开头\"- 但不是由于您的脚本中的任何内容，它只是因为它在 HTML 中而显示，并且样式表适用于 display: flex;。你的if (taskContainer === null) 没有什么意义。唯一可以为 null 的方法是，如果该元素在行 let taskContainer = document.querySelector(\'.container-task\'); 执行时不存在。
@CBroe 抱歉，我的英语仍然很差，我的意思是，我想同时使用这两个选项，按 Enter 键以便添加文本，如果用户愿意，还可以通过单击“+”按钮添加它。不好意思，关于taskContainer的问题，我没有完全理解，所以基本上不需要if语句？
那么你需要为按钮添加一个点击处理程序——因为它不会触发任何keypress 事件。（这是实际使用表格可能有好处的地方，因为表格能够也可以通过在文本输入字段中按 enter 来提交。所以你可以只使用一然后提交处理程序，而不必分别处理按钮单击和按键。）
task container 永远不会为空。因此，noTaskMessage 将不再显示。您应该检查失踪的孩子而不是task container 本身。

标签： javascript css

【解决方案1】：

除了检查进入关键，但我仍然建议不要使用它并建议使用<form>。

let board = document.querySelector('.to-do-board');
let taskContainer = document.querySelector('.container-task');
let taskbar = document.querySelector('.add-task');
let button = document.querySelector('.add-btn');
let noTasksMsg = document.querySelector('.message');


taskbar.addEventListener('keypress', handleEvent)
button.addEventListener('click', handleEvent)

function handleEvent(e){
   if ((e.type === 'click' || e.key === 'Enter') && taskbar.value !== '') {
        if (taskContainer === null) {
            noTasksMsg.style.display = 'flex';
        } else {
            noTasksMsg.style.display = 'none';
        }

        let div = document.createElement('div');
        div.className = 'item-task';
        div.innerHTML = taskbar.value;
        taskContainer.insertAdjacentElement('beforeend', div)

        let deleteButton = document.createElement('button')
        deleteButton.className = 'deleteBtn';
        deleteButton.textContent = "X";
        div.appendChild(deleteButton);

        taskbar.value = '';

        deleteButton.addEventListener('click', () => {
            div.remove();
        })
    }
}

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    letter-spacing: 2px;
  }

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 15px;
}

.to-do-board {
    width: 500px;
    background: #88CCF1;
    border-radius: 10px;
}

.title {
    background: #3587A4;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

h1 {
    text-align: center;
    color: white;
    padding: .5em 0 .5em 0;
    font-size: 22px;
}

.inputs {
    display: flex;
    justify-content: center;
    margin: 1em;
}

.add-task {
    padding: .5em;
    width: 80%;
    margin-right: 1em;
}

.add-btn {
    padding: 0 1em 0 1em;
    font-size: large;
    font-weight: bolder;
    color: white;
    border: none;
    border-radius: 10px;
    background: #2D848A;
    cursor: pointer;
}

.add-btn:hover {
    background: #3587A4;
}

.container-task {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1em;
}

.item-task {
    display: flex;
    justify-content: space-between;
    background: #C1DFF0;
    width: 90%;
    border-radius: 10px;
    margin-bottom: 10px;
}

.deleteBtn {
    border: none;
    background: #d45151;
    width: 3em;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    height: 2.5em;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.deleteBtn:hover {
    background: rgb(235, 95, 95);
}

.message {
    text-align: center;
    padding: 1em;
    color: white;
    background: #63afb1;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" lang="en">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <script src="main.js" defer></script>
    <title>To-do List!</title>
</head>
<body>
    <div class="container">
        <div class="to-do-board">
            <div class="title"><h1>To-Do List!</h1></div>
            <div class="inputs">
                <input type="text" placeholder="Add a task" class="add-task">
                <input type="submit" value="+" class="add-btn">
            </div>
            <div class="container-task">
                <div class="message">There are no pending tasks.</div>
            </div>
        </div>
    </div>
</body>
</html>

【讨论】：

同样，task container 永远不会为空。因此，noTaskMessage 将不再显示。您应该检查失踪的孩子而不是task container 本身。这也是OP要求的问题的一部分。