Good day. Please help me figure it out. The task is as follows: There is a button for adding the object ID to the print, the ID is dynamically substituted.

<a class="waves-effect waves-light btn" onclick="addPrint(48)"> <i class="material-icons left">print</i> В печать </a>

When you press a button, the ID is passed to the function:

 function addPrint(id){ var idToPrint = []; return function pushId(){ return idToPrint.push(id); }; }

I try to make it so that all these IDs are saved in the idToPrint = [] array, so that I can work with them in the future, print via another function. As I understand it, implement it correctly without global variables, through closures.
What does not work: to check whether the values ​​are stored in idToPrint or not, and how correctly then to "pull" this array from there?
Thanks in advance.

    3 answers 3

    The lexical environment of the function is destroyed after its execution.
    Therefore, idToPrint although it is idToPrint closure, is not used, which leads to its destruction.
    Here is an example implementation:

     let log = document.querySelector('#log'), toPrint = []; const addPrint = n => (log.innerHTML += `Добавлено ${n}` + '<br />') && toPrint.push(n); const print = _ => log.innerHTML += (toPrint.length ? `Печатаем: ${toPrint.join`, `}` : `Печатать нечего`) + '<br />'; 
     a{cursor: pointer;} 
     <a class="waves-effect waves-light btn" onclick="addPrint(16)"> <i class="material-icons left">print16</i> В печать </a><br /> <a class="waves-effect waves-light btn" onclick="addPrint(35)"> <i class="material-icons left">print35</i> В печать </a><br /> <a class="waves-effect waves-light btn" onclick="addPrint(42)"> <i class="material-icons left">print42</i> В печать </a><br /> <a class="waves-effect waves-light btn" onclick="addPrint(856)"> <i class="material-icons left">print856</i> В печать </a><hr /> <input type='button' onclick='print();' value='Печатать!' /><br /><br /> <div id='log'></div>

    • Thanks for the reply, he helped me. - Igor Lut
    • @Igor, always happy to help. - user207618
     var idController = { idToPrint: [], pushId: function(id){ return this.idToPrint.push(id); }, getIds: function(){ return this.idToPrint.slice(); // .slice() копия масива }, }; idController.pushId(....); ... = idController.getIds();

    But this is over-engineering, better make a global one if the project is small.

      Full of seams! See what happens to you. You have a global object — the addPrint function. Each time this function is called, a new local array idToPrint and a local closure object, when called, (and it is not called anywhere) id is added to its copy idToPrint . By the way, if I'm not mistaken then the design

      return function pushId(){

      Should generally result in a compilation error. Must be so

       return function (){ .... }

      if you want to return a closure object or so

       return (function (){ .... })()

      if you want to return the result of a closure.

      In order to escape from global variables you need one anonymous function.

       (function() { var printId = []; var addPrint = function(id) { printId.push(id); }; var printAll = function() { alert(printId.length); }; document.getElementById("print").addEventListener("click", printAll); var links = document.querySelectorAll(".addPrint"); for (var i = 0; i < links.length; i++) { alert(links[i]) links[i].addEventListener("click", addPrint); } })(); 
       <a class="waves-effect waves-light btn addPrint" id="48"> <i class="material-icons left">print</i> В печать </a><br/> <a class="waves-effect waves-light btn addPrint" id="49"> <i class="material-icons left">print</i> В печать </a><br/> <a class="waves-effect waves-light btn addPrint" id="50"> <i class="material-icons left">print</i> В печать </a><br/> <button id="print">Print</button>