Advertisement
EntropyStarRover

01. List Towns with lit html

Mar 11th, 2021
61
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { html, render } from 'https://unpkg.com/lit-html?module';
  2. function attachEventListeners() {
  3. let towns = document.getElementById("towns");
  4. let root = document.getElementById("root");
  5. let btn = document.getElementById("btnLoadTowns");
  6.  
  7. btn.addEventListener("click", function (e) {
  8. e.preventDefault();
  9. renderTowns();
  10. })
  11.  
  12.  
  13. function renderTowns() {
  14. let items = towns.value.split(", ");
  15. //create array of li
  16. const itemTemplates = [];
  17. for (const i of items) {
  18. itemTemplates.push(html`<li>${i}</li>`);
  19. }
  20. //render ul
  21. let rootUl = html`
  22. <ul>
  23. ${itemTemplates}
  24. </ul>
  25. `;
  26. //finally append to root
  27. render(rootUl, root)
  28. }
  29.  
  30. }
  31.  
  32. attachEventListeners()
Advertisement
RAW Paste Data Copied
Advertisement