Почему переменная передает «текст объекта» вместо значений?

Я в цикле 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', '&nbsp;&nbsp');
    lblRadioType.appendChild(space);
  }
}

Я попытался переместить объявление переменной внутри цикла for. Все, о чем я могу думать, это то, что это как-то выходит за рамки.

Я ожидал, что он вставит значения моего типа инструмента (Все, Гайка, Прорезь, Филлипс, Torx).

Он вставляет «объект Текст».

Ну ты делаешь text[i] = document.createTextNode(types[i]), потом var textNodeRadioType = document.createTextNode(text[i]) еще раз. Вы действительно хотели создать два текстовых узла за итерацию? Если да, передайте строку второму. Если нет, сбросьте один из вызовов.

Bergi 21.06.2024 05:45

Кстати, space.setAttribute('innerHTML', '&nbsp;&nbsp'); не делает то, что вы думаете. Вы хотите либо space.innerHTML = '&nbsp;&nbsp';, либо space.textContent = '\u00A0\u00A0';

Bergi 21.06.2024 05:53

Вот и все. Я создал текстовый объект, а затем попытался вызвать этот объект. RE: «inner.HTML» спасибо за это, я выясню, какой из них мне нужен. Я пытаюсь создать небольшое пространство между кнопками.

2CStarsOnceMore 21.06.2024 05:54
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
3
60
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема в том, что text[i] — это текстовый объект, а не строковое значение. Когда вы передаете text[i] в ​​document.createTextNode(), он создает новый текстовый узел со строковым представлением объекта Text, который является «объектом Text».

Чтобы это исправить, вам необходимо получить свойство nodeValue объекта Text, которое содержит фактическое текстовое значение. Вы можете сделать это, изменив строку:

var textNodeRadioType = document.createTextNode(text[i]);

к

var textNodeRadioType = document.createTextNode(text[i].nodeValue);

Это должно решить проблему и вставить в метку правильные текстовые значения.

Это действительно извлекает значения, которые я ожидал. Благодаря этому методу значения теперь отображаются дважды. Берги показал мне ошибку, но так и не ответил. Я предполагаю, что его просто не волновало такое простое исправление. Поэтому я приму ваш ответ, поскольку он также приводит к отображению ожидаемых значений и дает дополнительную информацию.

2CStarsOnceMore 21.06.2024 20:22

Другие вопросы по теме