Простые проблемы с добавлением флажка с помощью js

Question

Я использую JS для создания некоторых элементов - флажок + некоторое значение из ввода.

Мой код для создания флажка:

const checkboxOfTask = document.createElement('input');
checkboxOfTask.type = "checkbox";
checkboxOfTask.id = "checkboxOfTask";

затем я хочу добавить его и значение из текстового ввода в html примерно так:

addTaskButton.addEventListener('click', function() {
    const newTask = document.createElement('li');
    if (taskDateInput.value == "") {
        newTask.innerText = checkboxOfTask + taskInput.value;
    } else {
        newTask.innerText = checkboxOfTask + taskInput.value + " - " + taskDateInput.value;
    }

Затем, когда я смотрю на свой проект, список показывает мне «[object HTMLInputElement] sometxt». Теперь, когда я смотрю на него, я думаю, что проблема в newTask.innerText, потому что я добавляю его в innerText, но я не знаю, как это сделать правильно.

Answer 1

Ваш флажок checkboxOfTask не является строкой. Это HTML элемент ввода. Вы не можете вставить элемент HTML в innerText.

Вам нужна функция appendChild(). В вашем примере это должно быть: newTask.appendChild(checkboxOfTask). Также вы должны создать новый флажок для каждой задачи.

Я создал простой пример:

const addTaskButton = document.getElementById('add');
const taskDateInput = document.getElementById('taskDateInput');
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');

addTaskButton.addEventListener('click', function() {
    // ↓ li
    const newTask = document.createElement('li');
    // ↓ checkbox
    const checkboxOfTask = document.createElement('input')
    checkboxOfTask.type = "checkbox";
    // ↓ span
    const someSpan = document.createElement('span');
    someSpan.innerText = taskInput.value + (taskDateInput.value?' - '+taskDateInput.value:'');
    // ↓ append
    newTask.appendChild(checkboxOfTask);
    newTask.appendChild(someSpan);
    taskList.appendChild(newTask); 
});

<button type="button" id="add">add</button>
<input type="date" id="taskDateInput"/>
<input type="text" id="taskInput"/>

<ul id="taskList">
</ul>