Created
October 3, 2018 15:48
-
-
Save Dangeranger/c812d09a1b454684a310a522f5a883c1 to your computer and use it in GitHub Desktop.
BTVCA: Live demo of iterating over an HTML element collection, 2018-10-03T11-30-00-EST
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <style> | |
| .column { | |
| float: left; | |
| } | |
| .row { | |
| clear: both; | |
| } | |
| .cell { | |
| padding: 5px; | |
| border: black solid 1px; | |
| } | |
| #button-wrapper { | |
| padding: 10px; | |
| clear: both; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="row" id="row-1"> | |
| <div class="column cell" id="cell-0">Zero</div> | |
| <div class="column cell" id="cell-1">One</div> | |
| <div class="column cell" id="cell-2">Two</div> | |
| </div> | |
| <div class="row" id="row-2"> | |
| <div class="column cell" id="cell-3">Three</div> | |
| <div class="column cell" id="cell-4">Four</div> | |
| <div class="column cell" id="cell-5">Five</div> | |
| </div> | |
| <div class="row" id="row-3"> | |
| <div class="column cell" id="cell-6">Six</div> | |
| <div class="column cell" id="cell-7">Seven</div> | |
| <div class="column cell" id="cell-8">Eight</div> | |
| </div> | |
| <div id="button-wrapper"> | |
| <button id="count-it">Count Cell Content</button> | |
| </div> | |
| <div id="cell-counts"></div> | |
| <script> | |
| let button = document.getElementById('count-it'); | |
| function countCells() { | |
| let cells = document.querySelectorAll('.cell'); | |
| let cellLengths = {}; | |
| for (let cell of cells) { | |
| cellLengths[cell.textContent] = cell.textContent.length | |
| } | |
| return cellLengths; | |
| } | |
| function buildCellList(cellCounts) { | |
| let target = document.getElementById('cell-counts') | |
| let list = document.createElement('ul'); | |
| target.appendChild(list); | |
| for (let cell in cellCounts) { | |
| let item = document.createElement('li'); | |
| item.textContent = cell; | |
| item.textContent += `: ${cellCounts[cell]}`; | |
| list.appendChild(item); | |
| } | |
| console.log('DONE') | |
| return true; | |
| } | |
| function processCells() { | |
| let counts = countCells(); | |
| buildCellList(counts); | |
| } | |
| button.addEventListener('click', processCells); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment