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

})();