Long description

Set 1 contains 14 lines of H T M L code. Line 1: open angle bracket u l i d equals open double quotes list close double quotes close angle bracket, at indentation level 0. Line 2: open angle bracket l i close angle bracket, at indentation level 1. Line 3: open angle bracket img s r c equals open double quotes “a” dot p n g close double quotes ellipsis close angle bracket, at indentation level 2. Line 4: open angle bracket button close angle bracket Add To Cart open angle bracket forward slash button close angle bracket, at indentation level 2. Line 5: open angle bracket forward slash l i close angle bracket, at indentation level 1. Line 6: open angle bracket l i close angle bracket, at indentation level 1. Line 7: open angle bracket img s r c equals open double quotes b dot p n g close double quotes ellipsis close angle bracket, at indentation level 2. Line 8: open angle bracket button close angle bracket Add To Cart open angle bracket forward slash button close angle bracket, at indentation level 2. Line 9: open angle bracket forward slash l i close angle bracket, at indentation level 1. Line 10: open angle bracket l i close angle bracket, at indentation level 1. Line 11: open angle bracket img s r c equals open double quotes c dot p n g close double quotes ellipsis close angle bracket, at indentation level 2. Line 12: open angle bracket button close angle bracket Add To Cart open angle bracket forward slash button close angle bracket, at indentation level 2. Line 13: open angle bracket forward slash l i close angle bracket, at indentation level 1. Line 14: open angle bracket forward slash u l close angle bracket, at indentation level 0.

The browser consists of three images placed side by side each with a button labeled ADD TO CART below them.

Set 2 consists of nine lines of JavaScript code and is placed at the left of set 1. Line 1. forward slash forward slash select all the buttons, at indentation level 0. Line 2: const btns equals document dot querySelectorAll open parenthesis open double quotes hash list button close double quotes close parenthesis semicolon, at indentation level 0. Line 3: forward slash forward slash this won’t work and will generate null error, at indentation level 0. Line 4: btns dot addEventListener open parenthesis double quotes click close parenthesis double quotes comma function open parenthesis close parenthesis open curly brace ellipsis close curly brace close parenthesis semicolon, at indentation level 0. Line 5: forward slash forward slash instead must loop through node list ellipsis, at indentation level 0. Line 6: for open parenthesis StartCommand let EndCommand bt of btns close parenthesis open curly brace, at indentation level 0. Line 7: forward slash forward slash ellipsis and assign event listener to each node, at indentation level 1. Line 8: bt dot addEventListener open parenthesis open double quotes click close double quotes comma function open parenthesis close parenthesis open curly brace ellipsis close curly brace close parenthesis semicolon, at indentation level 1. Line 9: close curly brace, at indentation level 0.

Note: Remember that a node list (i. e., array of nodes) doesn’t support event listeners. Only individual node objects have the addEventListener open parenthesis close parenthesis method defined.