By Megan Perry-Thibault


2019-07-11 19:11:57 8 Comments

I am trying to get Javascript to read and write a paragraph based on content elsewhere on the page (specifically the names of items in a cart summary). The problem is that I can't get Javascript to write them correctly.

I need the being written paragraph to be "Order Includes: Product 1, Product 2, etc." but instead it is returning "Order Includes: [object HTMLParagraphElement], [object HTMLParagraphElement], etc."

<!-- Cart Summary -->
<p class="cartitems" id="Quantity">Product 1</p>
<p class="cartitems" id="Quantity">Product 2</p>

<!-- Paragraph to be written -->     
<p id="printItems"></p>

<script>
  var prods = document.getElementsByClassName("cartitems");
  var items = Array.from(prods);
  document.getElementById("printItems") = "Order Includes: " + 
  items;
</script>

I've tried using

var prods = document.getElementsByClassName("cartitems").innerHTML;

and

document.getElementById("printItems").innerHTML = "Order Includes: " + 
  items;

But both return undefined.

2 comments

@JGuarate 2019-07-11 19:58:28

What document.getElementsByClassName is returning is an HTMLCollection (HMTLCollection MDN Docs)

This is a direct element which is part of the DOM. So you can not parse it directly to an array, you can use the following method to parse to your desired array:

var prods = document.getElementsByClassName("cartitems"); var parsedArray = Array.from([].slice.call(prods)); document.getElementById("printItems") = "Order Includes: " + items;

As suggested on Harpo response (Harpo response)

NOTE: using Array.from on this case would be optional because what slice returns is an array by its own.

@Ori Drori 2019-07-11 19:13:57

The Document.getElementsByClassName() method returns a collection of DOM elements. When you convert the HTMLCollection, returned by the method, to an array with Array.from(), use the callback to get the innerText from the elements:

var prods = document.getElementsByClassName("cartitems");
var items = Array.from(prods, el => el.innerText);
document.getElementById("printItems").innerHTML = "Order Includes: " +
  items.join(', ');
<!-- Cart Summary -->
<p class="cartitems" id="Quantity">Product 1</p>
<p class="cartitems" id="Quantity">Product 2</p>

<!-- Paragraph to be written -->
<p id="printItems"></p>

Related Questions

Sponsored Content

6 Answered Questions

[SOLVED] ECMAScript 6 arrow function that returns an object

14 Answered Questions

[SOLVED] Why does (0 < 5 < 3) return true?

9 Answered Questions

[SOLVED] Why does ++[[]][+[]]+[+[]] return the string "10"?

  • 2011-08-26 08:46:14
  • JohnJohnGa
  • 196623 View
  • 1603 Score
  • 9 Answer
  • Tags:   javascript syntax

20 Answered Questions

4 Answered Questions

[SOLVED] Why does parseInt(1/0, 19) return 18?

1 Answered Questions

[SOLVED] Having problems displaying all values in array of objects

1 Answered Questions

On browser back the previous value is resetting

1 Answered Questions

[SOLVED] How to create nested Many to Many relations in parse

3 Answered Questions

[SOLVED] I am having an issue with jquery load function

15 Answered Questions

[SOLVED] Print content of JavaScript object?

  • 2009-10-26 14:39:00
  • cometta
  • 568681 View
  • 403 Score
  • 15 Answer
  • Tags:   javascript object

Sponsored Content