I'm having trouble figuring out how to add the values from an array as .textContent of a div.
What I want to happen is if I receive an array (topics) I want the contents of the array to be set as the .textContent of the elements with class="tab".
I feel like this code is correct, but doesn't seem to be working. Any ideas?
const Tabs = (topics) => {
const tabsTopics = document.createElement("div");
const tabsOne = document.createElement("div");
const tabsTwo = document.createElement("div");
const tabsThree = document.createElement("div");
tabsTopics.classList.add("topics");
tabsOne.classList.add("tab");
tabsTwo.classList.add("tab");
tabsThree.classList.add("tab");
tabsTopics.appendChild(tabsOne);
tabsTopics.appendChild(tabsTwo);
tabsTopics.appendChild(tabsThree);
document.querySelectorAll(".tab").forEach((el, i) => {
el.textContent = topics[i];
});
return tabsTopics;
}
const topics = ['1', '2', '3'];
document.getElementById('container').appendChild(Tabs(topics));<div id="container"></div>tabsTopics has not been inserted in the DOM so the document.querySelectorAll(".tab") will not find its children.
You should do
tabsTopics.querySelectorAll(".tab").forEach((el, i) => {
el.textContent = topics[i];
});
instead.
const Tabs = (topics) => {
const tabsTopics = document.createElement("div");
const tabsOne = document.createElement("div");
const tabsTwo = document.createElement("div");
const tabsThree = document.createElement("div");
tabsTopics.classList.add("topics");
tabsOne.classList.add("tab");
tabsTwo.classList.add("tab");
tabsThree.classList.add("tab");
tabsTopics.appendChild(tabsOne);
tabsTopics.appendChild(tabsTwo);
tabsTopics.appendChild(tabsThree);
tabsTopics.querySelectorAll(".tab").forEach((el, i) => {
el.textContent = topics[i];
});
return tabsTopics;
}
const topics = ['1', '2', '3'];
document.getElementById('container').appendChild(Tabs(topics));<div id="container"></div>You cannot querySelector/All while your elements are still in-memory, only after they are appended to the DOM.
Here's a suggestion/remake:
// DOM utility functions:
const EL = (sel, par) => (par || document).querySelector(sel);
const ELNew = (tag, prop) => Object.assign(document.createElement(tag), prop);
// Task:
const createTabs = (topics) => {
// Create wrapper
const EL_topics = ELNew("div", {className: "topics"});
// Iterate topics and create tabs
topics.forEach(topic => {
EL_topics.append(ELNew("div", {className: "tab", textContent:topic}));
});
// Append wrapper to container
EL("#container").append(EL_topics);
};
createTabs(["1", "2", "3"]);<div id="container"></div>The shorter way...
const Tabs = (topics) =>
{
const tabsTopics = document.createElement('div')
for (topic in topics)
tabsTopics.appendChild(
Object.assign(
document.createElement('div')
, { className:'tab', textContent: topic }
)
);
return tabsTopics;
}
const topics = ['1', '2', '3']
document.getElementById('container').appendChild(Tabs(topics));.tab {
color : blue;
}<div id="container"></div>