I am trying to grab data from div elements and output them seperated with , in this way a, b
How can I achieve this?
For my example, text in p output should look like test, test222 dada
let desc = document.querySelectorAll(".desc");
let output = document.querySelectorAll(".output");
let items = [];
desc.forEach((item, i) => {
console.log(item.dataset.sentence);
output.textContent += item[i];
})<div class="desc" data-sentence="test">
</div>
<div class="desc" data-sentence="test222 dada">
</div>
<p class="output">
</p>Here's what you could try:
The way you get the text with item.dataset.sentence is totally fine, you just need to put them in an array to use later.
let text = [];
desc.forEach((item, i) => {
text.push(item.dataset.sentence);
})
join()text.join(',') => 'test,test222 dada'
document.querySelectorAll(".output") will not work as it will return an array, you will need to change it to document.querySelector(".output") to have an element.
const desc = document.querySelectorAll(".desc");
const output = document.querySelector(".output");
const text = [];
desc.forEach(item => text.push(item.dataset.sentence));
output.textContent = text.join(',');<div class="desc" data-sentence="test"></div>
<div class="desc" data-sentence="test222 dada"></div>
<p class="output"></p>Here's another solution demonstrating the use of advanced ECMAScript syntax features like double destructuring in the function signature, array spread ([...iterable]) along with Array.prototype.map.
let desc = document.querySelectorAll(".desc");
let output = document.querySelector(".output");
output.textContent = [...desc].map(({dataset: { sentence } }) => sentence).join(', ');<div class="desc" data-sentence="test"></div>
<div class="desc" data-sentence="test222 dada"></div>
<p class="output"></p>Explanations:
[...desc] spreads the NodeList you have in desc into an array, which allows for the use of Array methods like map and join.({dataset: { sentence } }) destructures the object being passed to the map iterator. The signature basically says "I expect to be passed an object that has a dataset property, which is an object that has a sentence property. Give me that sentence as a local variable inside the function body."You almost finish it but you make some mistake.
When you select output, you only need to use querySelector instead of querySelectorAll.
let desc = document.querySelectorAll(".desc");
let output = document.querySelector(".output");
const data = [];
desc.forEach((item) => {
data.push(item.dataset.sentence);
});
output.textContent = data.join(",");<div class="desc" data-sentence="test">
</div>
<div class="desc" data-sentence="test222 dada">
</div>
<p class="output">
</p>