Functionality stops working after event Listener is activated

JavaScript
1

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>
<html>
<head>
<title>Yo what up</title>
</head>
<body>

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

click.addEventListener("click", ()=> { yo.style.color=inpu.value});

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);
console.log(dataJ);
let ol = document.getElementById("ol");

for (datu in dataJ){
  console.log(dataJ[datu]);
  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
  console.log(nooo);
  dataJ[nooo] = false;
doIt(nooo);
})

function doIt(nooo){

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

onChange();

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

function callIt(){
let key = event.target.value;
console.log(key);
dataJ[key] = event.target.checked;

}


</script>
</html>
2

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");

3

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”

4

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.

5

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.