Блог

Я работаю над сценарием веб-приложения «Список задач» и пытаюсь использовать содержимое 4 текстовых полей для создания содержимого элемента задач.

В настоящее время, когда я пытаюсь соединить элементы, сгенерированные из формы, я получаю сообщение об ошибке TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at HTMLButtonElement.document.getElementsByClassName.onclick

В настоящее время я использую функцию для создания элемента, который я хочу добавить в тело элемента ToDo, и я полагаю, что я возвращаю элемент из моей функции. Код размещен ниже.

 document.getElementsByClassName('modal-accept-button')[0].onclick = function () {
    var formVals = {
        what: document.getElementById('todo-input-what').value,
        where: document.getElementById('todo-input-where').value,
        when: document.getElementById('todo-input-when').value,
        who: document.getElementById('todo-input-who').value,
        details: document.getElementById('todo-input-details').value
    };

    document.getElementsByTagName('main')[0].appendChild(function () {
        var fields = ["where", "when", "who", "details"];
        var root = document.createElement("SECTION").className = "todo";
        var title = document.createElement("H2").value = formVals.what;
        var body = document.createElement("DIV").className = "todo-body"

        for (var i = 0; i < fields.length; i  ) {
            var currentField = fields[i];
            var currentVal = formVals.currentField;

            body.appendChild(function () {
                var p = document.createElement("P").className = "indent-wrapped";
                var span = document.createElement("SPAN").class = currentField;
                var text = document.createTextNode(currentVal);
                span.value = currentField   ": ";
                p.appendChild(span);
                p.appendChild(text);

                return p;
            });
        }
        root.appendChild(title);
        root.appendChild(body);

        return root;
    });
    resetModal();
}
  

Переменная p не является элементом (HTML «Node»); это строка.

Это потому, что вы присвоили ему строку, используя назначение последовательности (последнее значение возвращается полностью) — "indent-wrapped" переходит в className , а затем className переходит в p .

Отделите создание элемента от назначения класса:

 var p = document.createElement("P")
p.className = "indent-wrapped"
  

То же самое касается root , title и span . Всем им присваиваются строки одинаковым образом.

Вы присваиваете строку indent-wrapped p , как вы можете видеть в следующем фрагменте. Итак, вы пытаетесь вызвать appendChild строку вместо узла. Разделите назначение, поэтому сначала вы присвоите узлу значение p, а в следующем операторе задайте его classname. То же самое касается других элементов (root, title, body и т.д.), Где вы пытаетесь создать элемент и задать одно из их свойств в том же операторе.

 var p = document.createElement("P").className = "indent-wrapped";
console.log(p);