javascript - Checkbox -cross out the text when clicking checkBox for a todo list -

i've been watching tutorial on how cross out text when clicking on checkbox next text , code doesn't work, though same 1 in tutorial (where works fine).
i've been looking @ code long can't see whats wrong, maybe typo can't see… knows why?

here javascript code (just relevant part)

function updatingitem() {    var cbid = this.id.replace("cb_", "");   var textitem = document.getelementbyid("item_" + cbid);   textitem.style.textdecoration = "line-through"; }  function additem() {    totalitems++;   var entry = document.createelement("li");   var checkbox = document.createelement("input");   checkbox.type = "checkbox";   checkbox.id = "cb_" + totalitems;   checkbox.onclick = updatingitem;    var span = document.createelement("span");   span.id = "item_" + totalitems;   span.innerhtml = textitem;    var textitem = document.getelementbyid("textitem");   entry.innertext = textitem.value;   var location = document.getelementbyid("todolist");    entry.appendchild(checkbox);   entry.appendchild(span);   location.appendchild(entry); } 

you main issue have span.innerhtml = textitem; set before getting value var textitem = document.getelementbyid("textitem");

but hey...

css only:

label{    display: block;  }  label input[type=checkbox]:checked + span{    text-decoration: line-through;  }

  <label>      <input type="checkbox">      <span>buy coffee</span>    </label>        <label>      <input type="checkbox" checked>      <span>ask question on so</span>    </label>        <label>      <input type="checkbox">      <span>drink coffee</span>    </label>

and here's much simpler trivial not-quite-a-tutorial self-explanatory js code:

var todolist = document.getelementbyid("todolist");  var itemtext = document.getelementbyid("itemtext");  var add      = document.getelementbyid("add");    add.addeventlistener("click", function(){      var text = itemtext.value.trim();      // if no text entered - nothing    if(!text.length) return ;      // create , append html    var item = "<li><label><input type='checkbox'> <span>"+ text+"</span></label></li>";    todolist.insertadjacenthtml('beforeend', item);      // clear text our input    itemtext.value = "";       });

label{    display: block;  }  label input[type=checkbox]:checked + span{    text-decoration: line-through;    background:rgba(0,255,0, 0.2);  }

<ul id="todolist">    <li>      <label>        <input type="checkbox">        <span>buy coffee</span>      </label>    </li>    <li>      <label>        <input type="checkbox" checked>        <span>ask question on so</span>      </label>    </li>    <li>      <label>        <input type="checkbox">        <span>drink coffee</span>      </label>    </li>  </ul>    <input id="itemtext" type="text">  <button id="add">add list</button>

https://developer.mozilla.org/en-us/docs/web/api/element/insertadjacenthtml
https://developer.mozilla.org/en-us/docs/web/api/eventtarget/addeventlistener