HTML5 Data Attributes

Photo by Jackson So on Unsplash
// HTML
<p class="item" data-price="3">Apple: $3</p>
<p class="item" data-price="4">Orange: $4</p>
<p class="item" data-price="10">Pineapple: $10</p>
<p class="total"></p>
// JS
const foods = document.querySelectorAll('.item');
const totalElement = document.querySelector('.total');
let total = 0;
foods.forEach(item => {
total = total + parseInt(item.dataset.price);
})
totalElement.textContent = `Total: $${total}`;

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store