Use array.join() to implode classname array javascript

Question

I have some html tags and I am trying to join them using javascript array.

I have tried printing out the array to see what it looks like. If it try printing out one array item, it works but the whole array doesn't show

<p>Click the button to join the array elements into a string.</p>

<button onclick="myFunction()">Try it</button>

<p class="demo">Banana</p>
<p class="demo">Orange</p>
<p class="demo">Appl</p>

<p id="demo"></p>

<script>
function myFunction() {
  var fruits = document.querySelectorAll(".demo")[];
  var y = document.getElementById("demo");
  y.innerHTML = fruits.join(',');
}
</script>

I expect it to join the classname array together and print out a result but it shows nothing. I am not so good at javascript and would appreciate the help.

var fruits = document.querySelectorAll(".demo")[]; - what do you expect this to do? I don't recognise the syntax, and it seems to give me a syntax error when I try a similar construct in the console. — Robin Zigmond
– Robin Zigmond, Commented Aug 19, 2019 at 20:28

IceMetalPunk · Accepted Answer · 2019-08-19 20:29:47Z

4

I'm not sure what you're trying to do by adding [] to the end of your query selector code; that doesn't turn it into an array, if that's what you thought. document.querySelectorAll returns a collection of HTML elements, but not an actual array. To convert it, you have some options. You can do this:

var fruits = [...document.querySelectorAll(".demo")];

... is the spread operator, and it will spread out the resulting collection into the new array. Or you can do this:

var fruits = Array.from(document.querySelectorAll(".demo"));

Or you can, of course, manually loop over the collection and push to an array, but I wouldn't recommend that.

Also, as the spread operator and Array.from method are both from ES6, I'd suggest switching over to using let or const instead of var, as those have block scope (and, in the case of const, constant-value enforcement) that are much more useful than the function scope of the older var.

answered Aug 19, 2019 at 20:29

IceMetalPunk

5,6074 gold badges21 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robin Zigmond Over a year ago

It may also be useful to note that, although Array.from and spread syntax make it easier, you don't need ES6 syntax to get a true array from an "array-like" object. You can also do var fruits = Array.prototype.slice.apply(null, document.querySelectorAll(".demo")); which works fine in ES5.

Michael David · Accepted Answer · 2019-08-19 20:43:08Z

2

document.querySelectorAll returns a collection and not an array. You need to use Array.from() to convert into an array

function myFunction() {
var fruits = document.querySelectorAll(".demo");//Outputs a collection
//Change to array
  var fruitArray = Array.from(fruits).map(el => el.textContent);
  var y = document.getElementById("demo");
  y.innerHTML += fruitArray.join(',');
}

<p>Click the button to join the array elements into a string.</p>

<button onclick="myFunction()">Try it</button>

<p class="demo">Banana</p>
<p class="demo">Orange</p>
<p class="demo">Appl</p>

<p id="demo"></p>

answered Aug 19, 2019 at 20:43

Michael David

1139 bronze badges

Comments

Dominik Matis · Accepted Answer · 2019-08-19 20:30:11Z

0

var fruits = document.querySelectorAll(".demo")

This will contain all elements

answered Aug 19, 2019 at 20:30

Dominik Matis

2,15612 silver badges15 bronze badges

Comments

Akash Shrivastava · Accepted Answer · 2019-08-19 20:35:20Z

0

This works!

function myFunction() {

  var el = document.getElementsByClassName("demo");
  var fruits = Object.keys(el).
              filter(function(v){
                return el[v].innerText !== undefined;
              })
              .map(function(v, i, o) {
                return el[v].innerText
              })
              .join(" ");
  
  console.log(fruits);
  document.getElementById("demo").innerHTML = fruits; 
}

<!DOCTYPE html>
<html>
<body>

<p>Click the button to join the array elements into a string.</p>

<button onclick="myFunction()">Try it</button>

<p class="demo">Banana</p>
<p class="demo">Orange</p>
<p class="demo">Appl</p>

<p id="demo"></p>



</body>
</html>

answered Aug 19, 2019 at 20:35

Akash Shrivastava

1,3659 silver badges16 bronze badges

1 Comment

Pointy Over a year ago

It's helpful to provide an explanation along with the working solution so that the OP and other future readers understand the reasons for your changes.

Kamil Kiełczewski · Accepted Answer · 2019-08-19 20:49:32Z

0

Try

function myFunction() {
  var fruits = [];
  document.querySelectorAll(".demo").forEach(x=>fruits.push(x.innerText));  
  demo.innerHTML = fruits.join`,`;
}

function myFunction() {
  var fruits = [];
  document.querySelectorAll(".demo").forEach(x=>fruits.push(x.innerText));  
  demo.innerHTML = fruits.join`,`;
}

<p>Click the button to join the array elements into a string.</p>

<button onclick="myFunction()">Try it</button>

<p class="demo">Banana</p>
<p class="demo">Orange</p>
<p class="demo">Appl</p>

<p id="demo"></p>

answered Aug 19, 2019 at 20:49

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

Comments

deely3 · Accepted Answer · 2019-08-19 20:31:48Z

-1

querySelectorAll returns a NodeList. You need to convert it to an Array before using join.

answered Aug 19, 2019 at 20:31

deely3

11 bronze badge

Collectives™ on Stack Overflow

Use array.join() to implode classname array javascript

6 Answers 6

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related