JSFiddle - React, Tailwind, and code Playground

NodeList Play

by Matthew Day

HTML

<div class="pota">Pota</div>
<div class="pota">Mota</div>
<div id="results"></div>
<div id="resultsagain"></div>
<div id="resultsb"></div>

CSS

.pota {
  border: 1px solid gray;
  display: inline-block;
  margin: 8px 0;
  padding: 8px;
}

.pota:hover {
  background: gray;
  color: white;
  cursor: pointer;
}

#results {
  border-top: 1px solid gray;
  margin-top: 20px;
  padding-top: 20px
}

#resultsagain {
  border-top: 1px solid gray;
  margin-top: 20px;
  padding-top: 20px
}

JavaScript

var myNodelist = document.getElementsByClassName('pota');
var elements = myNodelist.length;

myNodelist.toString();
document.getElementById('results').innerHTML = myNodelist;

var nodesArray = [].slice.call(myNodelist);
var outputArray = nodesArray.join('\n');

document.getElementById('resultsagain').innerHTML = outputArray;

$('.pota').click(function() {
  setTimeout(function() {
    alert('yep');
  }, 3000);
  
  });