Array concepts Active learning: Printing those products Issue

[HimansuWebCoder]

MDN URL

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays

What specific section or headline is this issue about?

Active learning: Printing those products

What information was incorrect, unhelpful, or incomplete?

const list = document.querySelector('.output ul'); // this area create issue for us
const totalBox = document.querySelector('.output p');
let total = 0;
list.innerHTML = ''; // caught TypeError: Cannot set properties of null (setting 'innerHTML').
totalBox.textContent = '';

const products = [
'Underpants:6.99',
'Socks:5.99',
'T-shirt:14.99',
'Trousers:31.99',
'Shoes:23.99',
];

for (const product of products) {
const subArray = product.split(':');
const name = subArray[0];
const price = Number(subArray[1]);
total += price;
const itemText = ${name} — $${price};

const listItem = document.createElement('li');
listItem.textContent = itemText;
list.appendChild(listItem);
}

totalBox.textContent = Total: $${total.toFixed(2)};

What did you expect to see?

<script>
  const list = document.querySelector(".output1");
  const totalBox = document.querySelector(".output2");
  let total = 0;
  list.innerHTML = "";
  totalBox.textContent = "";
 

  const products = [
    "Underpants:6.99",
    "Socks:5.99",
    "T-shirt:14.99",
    "Trousers:31.99",
    "Shoes:23.99",
  ];

  for (const product of products) {
    const subArray = product.split(":");
    const name = subArray[0];
    const price = Number(subArray[1]);
    total += price;
    const itemText = `${name} — $${price}`;

    const listItem = document.createElement("li");
    listItem.textContent = itemText;
    list.appendChild(listItem);
  }

  totalBox.textContent = `Total: $${total.toFixed(2)}`;

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/learn/javascript/first_steps/arrays
• MDN URL: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/javascript/first_steps/arrays/index.md
• Last commit: b8f5e2a
• Document last modified: 2023-04-07T00:14:04.000Z

[Josh-Cena]

Not sure why it doesn't work for you, because it surely does for me:

You can check the source code here: https://github.com/mdn/content/blob/main/files/en-us/learn/javascript/first_steps/arrays/index.md

We can reopen if there actually turns out to be an issue