In my for loop, I am dynamically creating a table with radio buttons and trying to create labels dynamically as well. However, when I pass the variable to the label text node, it prints out 'object Text' on the page instead of the expected value.
function filter() {
// Fetches tool types for filter table
// The removeDuplicates function returns a Set so I convert toolTypes to an Array here.
var toolTypes = removeDuplicates(tools);
//types contains the values:
// var types = ['Nut', 'Slot', 'Phillips', 'Torx'];
var types = Array.from(toolTypes);
// Add the word 'All' to the 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 type of new radio button
radioButton.setAttribute("type", "radio");
// Set id of newly created radio button
radioButton.setAttribute('id', 'radioType' + i);
// Set unique group name of radio buttons
radioButton.setAttribute('name', 'radioType');
// Create label for Radio button row
var lblRadioType = document.createElement('label');
// HERE IS INSERTION
console.log(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);
}
}
I attempted moving the variable declaration inside the for loop but still faced the same issue. It seems that the variable is somehow out of scope.
Instead of inserting my tool type values (All, Nut, Slot, Phillips, Torx), it inserts 'object Text.'