JavaScript：2つの同一機能、1つは機能しません

Question

私は別のページにあり、送信ボタンがクリックされたときに実行されるJavaScript関数を持つ2つのフォームを持っています。ここにJavaScriptがあります：

var confirmConsentShot = document.getElementById('confirmConsentShot'); 
var confirmConsentMist = document.getElementById('confirmConsentMist'); 

confirmConsentShot.onclick = function() { 
    'use strict'; 
    var editForm = document.getElementById("editForm"); 
    var newP = document.createElement('p'); 
    confirmConsentShot.setAttribute('disabled', 'disabled'); 
    newP.innerHTML = '<img src="Image/loading.gif" width="40" height="40"><br /><span style="color: #00AA00">You are being redirected to electronically sign the Vaccination consent form.</span><br />'; 
    document.getElementById('loading').appendChild(newP); 
    window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight); 
    editForm.setAttribute('action', '?p=submitShot'); 
    editForm.submit(); 
}; 

confirmConsentMist.onclick = function() { 
    'use strict'; 
    var editFormMist = document.getElementById("editFormMist"); 
    var newPMist = document.createElement('p'); 
    confirmConsentMist.setAttribute('disabled', 'disabled'); 
    newPMist.innerHTML = '<img src="Image/loading.gif" width="40" height="40"><br /><span style="color: #00AA00">You are being redirected to electronically sign the Vaccination consent form.</span><br />'; 
    document.getElementById('loadingMist').appendChild(newPMist); 
    window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight); 
    editFormMist.setAttribute('action', '?p=submitMist'); 
    editFormMist.submit(); 
}; 

最初の機能は完璧に機能します。私はそれをコピーし、他のページで使用するように設定しました（両方のページがこのコードを含むJSファイルを読み込みます）。

私はいくつかの変数とIDタグの名前を変更しようとしましたが、それぞれのページが別々に読み込まれて同じIDを持つ要素が2つもなく、その関数内のローカルスコープしか持たない。また、元の機能（一番上の機能）は完璧に動作し続けます。 2番目の関数はまだ動作しませんが、コンソールエラーがなくても呼び出されることはありません。

スタンドアロンの名前付き関数に変更し、 'onclick = ""'属性で要素に追加することで、2番目の関数の回避策を見つけましたが、このコードが機能しない理由をまだ知っていなければなりません。私を狂ってしまう。

回避策では、完全一致の完全一致コードを実行します。

ただ参考のために、ここでの回避策であること適切にonclick属性を持つ関数：

function onMist() { 
    'use strict'; 
    var editFormMist = document.getElementById("editFormMist"); 
    var newPMist = document.createElement('p'); 
    confirmConsentMist.setAttribute('disabled', 'disabled'); 
    newPMist.innerHTML = '<img src="Image/loading.gif" width="40" height="40"><br /><span style="color: #00AA00">You are being redirected to electronically sign the Vaccination consent form.</span><br />'; 
    document.getElementById('loadingMist').appendChild(newPMist); 
    window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight); 
    editFormMist.setAttribute('action', '?p=submitMist'); 
    editFormMist.submit(); 
} 

私は、私は理解していないのJavaScriptそのものに根本的な何かがなければならないことを理解することができます。誰かが私にこれを説明できるなら、とても感謝します！

Answer 1

ここでは、id=confirmConsentShotの要素に.onclickイベントを割り当てるためにhtml DOMを使用する方法の例を示します。

document.getElementById("confirmConsentShot").onclick = function(){myFunction()}; 
function myFunction() { 
    'use strict'; 
    var editForm = document.getElementById("editForm"); 
    var newP = document.createElement('p'); 
    confirmConsentShot.setAttribute('disabled', 'disabled'); 
    newP.innerHTML = '<img src="Image/loading.gif" width="40" height="40"><br /><span style="color: #00AA00">You are being redirected to electronically sign the Vaccination consent form.</span><br />'; 
    document.getElementById('loading').appendChild(newP); 
    window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight); 
    editForm.setAttribute('action', '?p=submitShot'); 
    editForm.submit(); 
} 

また、そのようにaddEventListenerでclickイベントを添付することができます。

document.getElementById("confirmConsentShot").addEventListener("click", myFunction); 

...今、あなたの関数を作成：

function myFunction() { 
    //your function 
} 

は、前述したように、あなたのHTMLオブジェクトを確認してくださいを存在するか、エラーが発生します。