このコードをIIFEで正しくラップするか、別の方法を使用する方法

Question

グローバル変数を使用しないため、このコードを他のコードから制限したい場合は、var targetElement;をIIFE領域にのみ表示する必要があります。 私はこれをやろうとしましたが、checkboxをクリックすると、エラーがポップアップします。これは論理的ですが、正常に動作するように正しく行う方法がわかりません。

私のコードはどのように動作しますか？

---

checkboxを有効にすると、編集アクセスが許可されます。セルを選択=>テキストはinputになります。テキストを変更し、apply =>テキストが変更されます。

---

<table id="tableCinema" style="border-collapse: collapse;" border="1" > 
     <tr> 
      <th >Type</th> 
      <th >Name</th> 
      <th >Time</th> 
     </tr>     
     <tr> 
      <td >1</td><td >*</td><td >*</td> 
     </tr>       
    </table> 

    Change: <input id="changes" type="checkbox" name="" 
    onclick="eventsInTable()"><br> 

    Get text for change: <input id="changeText" type="text" name="" value=""> 

    <button id="applyToChanges">Apply</button> 

---

var targetElement; 

var inputChangeText = document.getElementById('changeText'); 
var applyChanges = document.getElementById('applyToChanges'); 

applyChanges.addEventListener('click', function() { 
    if (targetElement) { 
    targetElement.textContent = inputChangeText.value; 
    } 
}, false); 

//change text 
var changeText = function(e) { 
    inputChangeText.value = e.target.textContent; 
    targetElement = e.target; 
} 

//allow to change 
function eventsInTable() { 
    var checkBoxChanges = document.getElementById('changes'); 
    var table = document.getElementById('tableCinema'); 

    if (checkBoxChanges.checked) { 
     table.addEventListener('click', changeText, false); 
    } else { 
     table.removeEventListener('click', changeText, false); 
     alert("You haven't access to change"); 
    } 
} 

Answer 1

あなたは、それは世界的に利用可能でなければならない、HTML属性からそれを呼び出したい場合は、しかし、それは単一のグローバル変数にあなたのグローバルな汚染を維持することが可能だし、他のすべてをプロパティとしてプロパティに置きます。

window.MyNamespace = (function() { 
    // your protected code 

    // return an object that has whatever you want to access 
    return { 
    eventsInTable: myLocalEventsInTableFunction 
    // other stuff 
    } 
})(); 

次に、ネームスペース経由でハンドラ呼び出しを行います。

Change: <input id="changes" type="checkbox" name="" 
    onclick="MyNamespace.eventsInTable()"><br>