How to access functions outside an iife

Question

I got an assignment on IIFE.
I read the documentation, tried here but still couldn't find answer to my problems.
I have 2 files. many functions will be written in a file named items.js inside an IIFE and i should be able to access those function in another file let's say main.js.
I tried achieving it but couldn't actually do it. Any input will be appreciated.
Thank you. Actually all I need is, I have a function named TimeForNewToDoItem(item) in items.js inside an IIFE,
I should be able to access it in another .js file.
I don't need to store any return value from that function.
TimeForNewToDoItem(item)function just does some DOM manipulation

// main.js
(function(){
 var toDoElements = {};
 var ulContainer = document.querySelector("#itemContainerId");
 var div = document.createElement("div");
 var listArray = [];
 
 document.addEventListener("DOMContentLoaded", function(event) {
  console.log("DOM loaded");
  //adding existing elements
  var preloadedItems = ["Eat","sleep"];
  preloadedItems.map(function(item)
   {
    listArray = TimeForNewToDoItem(item);
    div.appendChild(listArray);
   }); 
  /*var newInputItem = document.getElementById("newToDoItem");
  var ulElement = document.getElementById("itemContainerId");
  var clrscr = document.getElementById("clearScreen");
  ulElement.addEventListener("click",AssignListeners);
  clrscr.addEventListener("click",clearScreen);
  newInputItem.addEventListener("keydown",check);*/
 });


 //checks for enter key
 function check(event){
  console.log("Keydown event listened");
  if(event.keyCode === 13){
   console.log("Enter key pressed, going to add new items");
   var newItem = document.getElementById("newToDoItem").value;
   TimeForNewToDoItem(newItem);
  }
 }
 
})();

//items.js
(function(){
  //to add new todo item
 function TimeForNewToDoItem(newItem){
  var newInputItem = document.getElementById("newToDoItem");
  newInputItem.value = null;
  var childCount = ulContainer.childNodes.length;
  console.log("totally "+childCount+" child nodes are currently present inside parent ul element");
  var checkBoxid = "checkBox"+childCount;
  var stat = "unchecked";
  var divContent = template(newItem,childCount);
  console.log("new TODO item added");
  var insertedItems = {id : checkBoxid, name : newItem, state : stat};
  storeElements(insertedItems);
  return divContent;
 }
 
  //returns the array of elements to be added to the DOM
 function template(newItem,childCount){
  var checkBoxid = "checkBox"+childCount;
  var newItemToBeAdded = [];
  var count = 0;
  newItemToBeAdded[count++] = "<li class = 'customHorizontalRule'>";
  newItemToBeAdded[count++] = "<input type = 'checkbox' id = '"+checkBoxid+"' class = 'checkBox'/>";
  newItemToBeAdded[count++] = "<span>"+newItem+"</span>";
  newItemToBeAdded[count++] = "<a href = '#' class = 'moveRightSide' id = 'deletebutton"+childCount+"' >Delete</a>";
  newItemToBeAdded = newItemToBeAdded.join("");
  return newItemToBeAdded;
})();

Answer 1

You can assign the IIFE to some variables. Also return an object containing reference to the functions from items.js

// main.js
// Assinged to a variable
var main = (function(){
    // rest of code 
    function check(event){
        console.log("Keydown event listened");
        if(event.keyCode === 13){
            // rest of code
            // Use by calling the variable name followed by the inner function
            items.Time_Item(newItem);
        }
    }
})();

Assigning the IIFE in items.js to a variable. This IIFE is returning an object

//items.js
var items = (function() {
    //to add new todo item
    function TimeForNewToDoItem(newItem) {
        // rest of code
        return divContent;
    }

    //returns the array of elements to be added to the DOM
    function template(newItem, childCount) {
        // Rest of code
        return newItemToBeAdded;
    }
    return {
        Time_Item:TimeForNewToDoItem,
        template_item:template
    }
})();

Also note a function with name is uppercase represent a constructor function. You can check js function naming conventions for better guide.

Answer 2

I tried to modify your files there are some things that are missing. But what you are asking can be done by creating a variable or object that is pushed from iife to window and then it will be accessed in other iffe.

//item.js
(function(){
  //to add new todo item
  window.MyNamespace = {
    TimeForNewToDoItem: function(newItem) {
      var newInputItem = document.getElementById("newToDoItem");
      newInputItem.value = null;
      var childCount = ulContainer.childNodes.length;
      console.log("totally "+childCount+" child nodes are currently present inside parent ul element");
      var checkBoxid = "checkBox"+childCount;
      var stat = "unchecked";
      var divContent = template(newItem,childCount);
      console.log("new TODO item added");
      var insertedItems = {id : checkBoxid, name : newItem, state : stat};
      storeElements(insertedItems);
      return divContent;
    },

    //returns the array of elements to be added to the DOM
    template: function(newItem,childCount){
      var checkBoxid = "checkBox"+childCount;
      var newItemToBeAdded = [];
      var count = 0;
      newItemToBeAdded[count++] = "<li class = 'customHorizontalRule'>";
      newItemToBeAdded[count++] = "<input type = 'checkbox' id = '"+checkBoxid+"' class = 'checkBox'/>";
      newItemToBeAdded[count++] = "<span>"+newItem+"</span>";
      newItemToBeAdded[count++] = "<a href = '#' class = 'moveRightSide' id = 'deletebutton"+childCount+"' >Delete</a>";
      newItemToBeAdded = newItemToBeAdded.join("");
      return newItemToBeAdded;
    }
  };
})();

// main.js
(function(){
    var toDoElements = {};
    var ulContainer = document.querySelector("#itemContainerId");
    var div = document.createElement("div");
    var listArray = [];

    document.addEventListener("DOMContentLoaded", function(event) {
        console.log("DOM loaded");
        //adding existing elements
        var preloadedItems = ["Eat","sleep"];
        preloadedItems.map(function(item)
            {
                listArray = MyNamespace.TimeForNewToDoItem(item);
                div.appendChild(listArray);
            }); 
        var newInputItem = document.getElementById("newToDoItem");
        var ulElement = document.getElementById("itemContainerId");
        var clrscr = document.getElementById("clearScreen");
        ulElement.addEventListener("click",AssignListeners);
        clrscr.addEventListener("click",clearScreen);
        newInputItem.addEventListener("keydown",check);
    });


    //checks for enter key
    function check(event){
        console.log("Keydown event listened");
        if(event.keyCode === 13){
            console.log("Enter key pressed, going to add new items");
            var newItem = document.getElementById("newToDoItem").value;
            MyNamespace.TimeForNewToDoItem(newItem);
        }
    }

})();