joining functions onclick and onkeyup

Question

I just went over my code with an experienced developer and he made a lot of very helpful changes, but, unfortunately, the code did not save properly and I lost all the edits!!!

The main thing he helped with was eliminating some of my code repetition. I have two functions that share a lot of code: //Add item to To-Do List with "Add" Button AND //Add item to list with ENTER KEY.

What he did for this was to add the bulk of these functions to the //Add new item to To-Do List function, so the other functions were simpler. I forgot how he did this, though! If anyone can help I would really appreciate it!

//Add new item to To-Do List
function addNewItem(list, itemText) {
  totalItems++;

  var listItem = document.createElement("li");

  var checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.id = "cb_" + totalItems;
  checkbox.onclick = updateStatus;

  var span = document.createElement("span");
  span.id = "item_" + totalItems;
  span.textContent = itemText;


  var spanDelete = document.createElement("span2");
  spanDelete.id= "spanDelete_" + totalItems;
  spanDelete.textContent = "DELETE";
  spanDelete.onclick = deleteItem;


  var spanEdit = document.createElement("span3")
  spanEdit.id = "editId_" + totalItems;
  spanEdit.textContent = "EDIT";
  spanEdit.onclick = editItem;

  listItem.appendChild(checkbox);
  listItem.appendChild(span);
  listItem.appendChild(spanDelete);
  listItem.appendChild(spanEdit);


  list.appendChild(listItem);
}

//Add item to list with ENTER KEY
var totalItems = 0;
var inItemText = document.getElementById("inItemText");
inItemText.focus();
inItemText.onkeyup = function(event) {
  if (event.which === 13) {
    var itemText = inItemText.value;

    if (!itemText || itemText === "") {
      return false;
    }

    addNewItem(document.getElementById("todoList"), itemText);

    inItemText.focus();
    inItemText.select();
  }
}


  //Add item to To-Do List with "Add" Button
  var btnNew = document.getElementById("btnAdd");
  btnNew.onclick = function() {
    var itemText = inItemText.value;

    if (!itemText || itemText === "") {
      return false;
    }


    addNewItem(document.getElementById("todoList"), itemText);

    inItemText.focus();
    inItemText.select();

  }

Here is the Fiddle: https://jsfiddle.net/Rassisland/7bkcLfhu/

Answer 1

To avoid code duplication, save your function to a variable, and then reference it using as many event handlers are applicable. The important lesson here is you don't always need to use anonymous functions.

;(function(){
  "use strict";
  
  var button = document.getElementById('button');
  
  var doStuff = function(event){
    //  do some stuff
    alert('i did some stuff');
  };
  
  document.addEventListener('keypress',doStuff);
  button.addEventListener('click',doStuff);
  
})();

<button id="button" name="button">i am a button</button>

<textarea id="textarea" name="textarea">press a key</textarea>