Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

Share this Page URL

CHAPTER 8: Manipulating Elements > Summary - Pg. 251

CHAPTER 8 MANIPULATING ELEMENTS </div> <div class="dcell" data-product="daffodil"> <img src="daffodil.png"/><label for="daffodil">Daffodil:</label> <input name="daffodil" value="0" required /> </div> <div class="dcell" data-product="rose"> <img src="rose.png"/><label for="rose">Rose:</label> <input name="rose" value="0" required /> </div> </div> </div> </div> <div id="buttonDiv"><button type="submit">Place Order</button></div> </form> </body> </html> In this example, I have added HTML5 data attributes to a cut-down version of the example document. The script selects the elements with the data attributes and uses the data method to retrieve the associated values and print them to the console. Notice that I omit the data- part of the attribute name; for example, I refer to data-product simply as product. Here is the output from the script: Product: astor Product: daffodil Product: rose