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}`;

--

--

--

Learning to code by teaching others — Living at the cross section of tech, music, and the outdoors — Currently studying Web Development at Practicum by Yandex.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

004: GraphQL Subscriptions

Distributed data backup and storage

Git and GitHub- The simple Guide

Get your Aadhaar, PAN delivered on WhatsApp using Digilocker: Here’s how

The Zen of 3d Printing & Process

A PLA-filament 3d-printed replica of a walled Japanese rock garden, complete with large stones and carefully raked sand.

Over-Provisioned and Over-Permissioned Containers & Kubernetes

The Complete Remote Workforce: Azure Windows Virtual Desktop | Withum

Don’t sleep on CSS

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
Jake McCambley

Jake McCambley

Learning to code by teaching others — Living at the cross section of tech, music, and the outdoors — Currently studying Web Development at Practicum by Yandex.

More from Medium

Regex secrets revealed

Promises

Understanding the stack data structure in JavaScript— How does JavaScript use it?

How to create a function that will return an array with words inside a text

[Figure1: Super adorable mop dog living in Sendai, Japan]