Я в цикле for создаю таблицу с переключателями. Я пытаюсь динамически создавать метки. Моя созданная переменная будет регистрировать ожидаемые значения на консоли, на одну строку выше, где я передаю переменную в созданный текстовый узел метки, но на странице вместо ожидаемого значения выводится «Текст объекта».
function filter() {
// Gets tool types for filter table
// removeDuplicates function returns a Set, which is why I convert toolTypes to an Array here on the next line.
var toolTypes = removeDuplicates(tools);
//types holds the values:
// var types = ['Nut', 'Slot', 'Phillips', 'Torx'];
var types = Array.from(toolTypes);
// Add word 'All' to array
types.splice(0, 0, 'All');
var table = document.getElementById('tableFilter');
var tr = document.createElement('tr');
table.appendChild(tr);
var td = [];
var text = [];
for(let i = 0; i < types.length; i++) {
td[i] = document.createElement('td');
text[i] = document.createTextNode(types[i]);
// td[i].appendChild(text[i]);
tr.appendChild(td[i]);
// Create radio button
var radioButton = document.createElement("input");
// Set id of new radio button
radioButton.setAttribute("type", "radio");
// Set id of newly created radio button
radioButton.setAttribute('id', 'radioType' + i);
// Set unqiue group name of radio buttons
radioButton.setAttribute('name', 'radioType');
// Create label for Radio button row
var lblRadioType = document.createElement('label');
// HERE IS INSERTION
console.info(text[i]);
// create text node for label text
var textNodeRadioType = document.createTextNode(text[i]);
// add text to newly created label
lblRadioType.appendChild(textNodeRadioType);
// Assign ID to label text
lblRadioType.setAttribute('id', 'textRadioType' + i);
// add radio button
td[i].appendChild(radioButton);
// add label text for radio button
td[i].appendChild(lblRadioType);
// add space between two radio buttons
var space = document.createElement('span');
space.setAttribute('innerHTML', '  ');
lblRadioType.appendChild(space);
}
}
Я попытался переместить объявление переменной внутри цикла for. Все, о чем я могу думать, это то, что это как-то выходит за рамки.
Я ожидал, что он вставит значения моего типа инструмента (Все, Гайка, Прорезь, Филлипс, Torx).
Он вставляет «объект Текст».
Кстати, space.setAttribute('innerHTML', '  ');
не делает то, что вы думаете. Вы хотите либо space.innerHTML = '  ';
, либо space.textContent = '\u00A0\u00A0';
Вот и все. Я создал текстовый объект, а затем попытался вызвать этот объект. RE: «inner.HTML» спасибо за это, я выясню, какой из них мне нужен. Я пытаюсь создать небольшое пространство между кнопками.
Проблема в том, что text[i] — это текстовый объект, а не строковое значение. Когда вы передаете text[i] в document.createTextNode(), он создает новый текстовый узел со строковым представлением объекта Text, который является «объектом Text».
Чтобы это исправить, вам необходимо получить свойство nodeValue объекта Text, которое содержит фактическое текстовое значение. Вы можете сделать это, изменив строку:
var textNodeRadioType = document.createTextNode(text[i]);
к
var textNodeRadioType = document.createTextNode(text[i].nodeValue);
Это должно решить проблему и вставить в метку правильные текстовые значения.
Это действительно извлекает значения, которые я ожидал. Благодаря этому методу значения теперь отображаются дважды. Берги показал мне ошибку, но так и не ответил. Я предполагаю, что его просто не волновало такое простое исправление. Поэтому я приму ваш ответ, поскольку он также приводит к отображению ожидаемых значений и дает дополнительную информацию.
Ну ты делаешь
text[i] = document.createTextNode(types[i])
, потомvar textNodeRadioType = document.createTextNode(text[i])
еще раз. Вы действительно хотели создать два текстовых узла за итерацию? Если да, передайте строку второму. Если нет, сбросьте один из вызовов.