JSFiddle - React, Tailwind, and code Playground

by ronnjoe

JavaScript

function setup() {
    // Write your code here.
    var spans = document.getElementsByTagName("span");
    for (i = 0; i < spans.length; i++) {
        spans[i].id = i;
        spans[i].onclick = function(e) {
            assignClassList(e.target.id);
        }
    }
}

function assignClassList(id) {
            console.log(id);
    var spans = document.getElementsByTagName("span");
    for (i = 0; i < spans.length; i++) {
        if (i <= id) {
            spans[i].classList.add("active");
        } else {
            spans[i].classList.remove("active");
        }
    }
}

// Example case. 
document.body.innerHTML = `
<div id='rating'>
  <span>*</span>
  <span>*</span>
  <span>*</span>
  <span>*</span>
  <span>*</span>
</div>`;

setup();

document.getElementsByTagName("span")[2].click();
console.log(document.body.innerHTML);