MDN Array Code - not work

Ref link: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays#Active_learning_Printing_those_products!

by officialmansu

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="https://developer.mozilla.org/static/build/styles/samples.37902ba3b7fe.css" rel="stylesheet" type="text/css" />
    <title>Arrays - Playable_code - code sample</title>
</head>
<body>
    <h2>Live output</h2>
    <div class="output" style="min-height: 150px;">
        <ul>
        </ul>
        <p></p>
    </div>
</body>
</html>

CSS

html {
    font-family: sans-serif;
}

h2 {
    font-size: 16px;
}

.a11y-label {
    margin: 0;
    text-align: right;
    font-size: 0.7rem;
    width: 98%;
}

body {
    margin: 10px;
    background-color: #f5f9fa;
}

JavaScript

var list = document.querySelector('.output ul');
var totalBox = document.querySelector('.output p');
var total = 0;
list.innerHTML = '';
totalBox.textContent = '';
// number 1
var number1 = ['Underpants:6.99', 'Socks:5.99', 'T-shirt:14.99', 'Trousers:31.99', 'Shoes:23.99'];


for (var i = 0; i <= (number1.length)-1; i++) {
  var productName = slice(0, (number1[i].indexOf(':')));
  var productPrice = slice(number1[i].indexOf(':')+1); 

  itemText = productName[i] + '—' + productPrice[i];

  total += productPrice[i];

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

totalBox.textContent = 'Total: $' + total.toFixed(2);