#javascript
#javascript
Вопрос:
Я работаю над сценарием веб-приложения «Список задач» и пытаюсь использовать содержимое 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();
}
Комментарии:
1.
root
,title
,span
иp
это не узлы, это строки.2. если ваш элемент body не имеет идентификатора ‘body’, вам нужно ссылаться на него путем вызова
document.body.appendChild(function () {...
; в любом случае ваш код представляет собой полный беспорядок, поэтому безрезультатно
Ответ №1:
Переменная p
не является элементом (HTML «Node»); это строка.
Это потому, что вы присвоили ему строку, используя назначение последовательности (последнее значение возвращается полностью) — "indent-wrapped"
переходит в className
, а затем className
переходит в p
.
Отделите создание элемента от назначения класса:
var p = document.createElement("P")
p.className = "indent-wrapped"
То же самое касается root
, title
и span
. Всем им присваиваются строки одинаковым образом.
Ответ №2:
Вы присваиваете строку indent-wrapped
p
, как вы можете видеть в следующем фрагменте. Итак, вы пытаетесь вызвать appendChild
строку вместо узла. Разделите назначение, поэтому сначала вы присвоите узлу значение p, а в следующем операторе задайте его classname. То же самое касается других элементов (root, title, body и т.д.), Где вы пытаетесь создать элемент и задать одно из их свойств в том же операторе.
var p = document.createElement("P").className = "indent-wrapped";
console.log(p);