Functionality stops working after event Listener is activated

This is a legit question: Code works well until the event listener is activated adding a new item to a list. Then All functionality is lost:

<!DOCTYPE html>
<title>Yo what up</title>

<input id='inpu' type="text">
<button type="button" id="click">Button</button>
  <ol id="ol">
  <input id="addit" value="text">
  <button id="butt">add item</button>
<script type="text/javascript">
let yo = document.getElementById("yo");
let inpu = document.getElementById("inpu");
let click = document.getElementById("click");

click.addEventListener("click", ()=> {});

let list = { "learn": {
              "javascript": true,
              "react": false,
              "node": false,
              "python": false,
              "sql": false,
              "Java": false

let data = list["learn"];
let dataS = JSON.stringify(data);
let dataJ = JSON.parse(dataS);
let ol = document.getElementById("ol");

for (datu in dataJ){
  let status = dataJ[datu]? "checked" : '';
let html = '<li class="box"><input + value=' + datu +' ' + 'type="checkbox"' + status + '>' + datu + '</li>';
ol.innerHTML += html;

let addit = document.getElementById("addit");
let butt = document.getElementById("butt")

butt.addEventListener("click", () => {
  let nooo = addit.value
  dataJ[nooo] = false;

function doIt(nooo){

  let huml = '<li class="box"><input + value=' + nooo +' ' + 'type="checkbox"' + '>' + nooo + '</li>';
  ol.innerHTML += huml;


function onChange(){
let change = document.querySelectorAll('.box');
for(index in change){
change[index].onchange = callIt;

function callIt(){
let key =;
dataJ[key] =;



Seems to work for me, although there is no element with the id yo (for the color change)

let yo = document.getElementById("yo");

maybe you meant ol

let yo = document.getElementById("ol");

Sorry. I deleted that. However when you add a new item to the list you can no longer keep the “list” updated meaning if you check the box it stops recognizing that it is now “checked”

Right. You might want to google event delegation. You can’t really listen to events on dynamic elements, unless you rewire the event every time. Instead, listen for the event on a static prent of the dynamic elements.

Obviously you are a jedi javascripter. My issue is the code saves if a language has been learned as “true” if is checked off until a new item is added. then it stops working totally. I will try to add event listener on the parent element. I’ll see if that works.