JSFiddle - React, Tailwind, and code Playground

by Sudoku Lovor

HTML

<ul class="todo-list">
        <li>
            <label>Love is here</label>
          </li>
          <li>
            <label>Love is here as well</label>
            </li>
            <li>
              </li>
</ul>

CSS

ul {
      list-style: none;
      }

JavaScript

window.onload = function () {
    el = document.getElementsByTagName('li');
      for (var i = 0; i < el.length; i++) {
        el[i].addEventListener('mouseover',editItem);
      }

    }
    function editItem(e) {
      var input = document.createElement('input');
      var test = document.getElementById('edit')
      if(!test) {
      var label = e.target;
      var parent = label.parentNode;
      console.log('this is parent ' + parent);
      input.id = 'edit';
      input.value = label.innerText;
      parent.replaceChild(input,label);
      input.focus();
      input.addEventListener('keypress',function (e) {
        if(e.keyCode == 13) {
          e.preventDefault();
          label.innerText = input.value;
          parent.replaceChild(label,input);
        }
      })
      input.addEventListener('mouseout',function(e) {
        parent.replaceChild(label,input);
      })
    }
    }