Javascript 如何在输入元素中附加一个属性为checkbox

发布于03月16日

我是JavaScript新手，正在try 创建一个待办事项列表.如何在代码中附加一个带有复选框属性的输入，以便段落一旦完成就可以被选中？

下面是我的代码:

// ! DOM ELEMENTS

const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');


// ! ADD TASK

function addTask() {
  if (taskInput.value === '') {
    alert('Oh no... You have not written anything?');
  } else {
    let paragraph = document.createElement('p');
    paragraph.textContent = taskInput.value;
    taskList.appendChild(paragraph);
    saveTasks();
  }

  taskInput.value = '';
}

<div class="container">
  <h1>TO DO LIST</h1>

  <input type="text" id="taskInput" placeholder="ENTER TASK HERE!">

  <button id="addButton" click="addTask()">ADD</button>

  <div id="taskList">
  </div>

  <p> lorem 10</p>

</div>

推荐答案

你很接近了，但这里还需要做点工作.例如，让我们将其分解，以展示如何切换到事件侦听器等功能.

// ... (your existing DOM elements code)

function addTask() {
  if (taskInput.value === '') {
    alert('Oh no... You have not written anything?');
  } else {
    // Create a paragraph to hold the task text
    let paragraph = document.createElement('p');
    paragraph.textContent = taskInput.value;

    // Create the checkbox 
    let checkbox = document.createElement('input');
    checkbox.type = 'checkbox';

    // Add the checkbox BEFORE the text within the paragraph
    paragraph.prepend(checkbox); 

    // Add the whole paragraph to the task list
    taskList.appendChild(paragraph);

    // Clear the input field
    taskInput.value = '';
  }
}

100:这行创建一个输入元素并将其类型设置为"checkbox"，这就是创建可点击框的原因.
第100:章这是关键！我们使用prepend在段落开头插入复选框，确保它出现在任务文本之前.

按钮也有一个小的变化:

<button id="addButton" onclick="addTask()">ADD</button>

对于更常见的:

<button id="addButton">ADD</button>

请注意，我们已经删除了内联onclick，而在前面的JavaScript代码中添加了addEventListener.这些更改意味着每个新任务在其行的开头都有一个复选框.您可以单击复选框将任务标记为已完成.

Javascript相关问答推荐

vanillajs-datepicker未设置输入值，日期单击时未触发更改事件

角色 map 集/spritebook动画，用户输入不停止在键上相位器3

TypeScript索引签名模板限制

阿波罗返回的数据错误，但在网络判断器中是正确的

如何迭代叔父元素的子HTML元素

对路由DOM嵌套路由作出react

如何将innerHTML字符串修剪为其中的特定元素？

有条件重定向到移动子域

让chart.js饼图中的一个切片变厚？

VSCode中出现随机行

当我try 将值更改为True时，按钮不会锁定

为什么云存储中的文件不能公开使用？

从逗号和破折号分隔的给定字符串中查找所有有效的星期几

try 将Redux工具包与MUI ToggleButtonGroup组件一起使用时出错

在验证和提交表单后使用useNavigate()进行react 重定向，使用带有加载器和操作的路由

本地损坏的Java脚本

如何在FiRestore中的事务中使用getCountFromServer

我为什么要使用回调而不是等待？

在高位图中显示每个y轴系列的多个值

如何在Java脚本中添加一个可以在另一个面板中垂直调整大小的面板？

实用课程推荐