JavaScript onclick 関数が途中でトリガーされる

タグと同様の外観を持つリンクを作成するが、クリック時に関数を実行することを目的とした場合、ユーザーは、ページの読み込み時に関数が誤って呼び出されるシナリオに遭遇する可能性があります。これにより、目的のクリック イベントが正しく機能しなくなります。

よくある落とし穴は、onclick 属性を割り当てる際のかっこの不適切な使用です。関数をすぐに実行する sendNode.onclick = SecondFunction() の代わりに、正しい構文は sendNode.onclick = SecondFunction です。これにより、クリック イベント時にのみ実行される関数への参照が割り当てられます。

function startFunction() {
  var sentNode = document.createElement('a');
  sentNode.setAttribute('href', "#");
  sentNode.setAttribute('onclick', secondFunction);
  //sentNode.onclick = secondFunction();
  sentNode.innerHTML = "Sent Items";
  //...
}

括弧を省略すると、onclick イベントは実行結果ではなく関数参照に正しくバインドされ、意図した動作が保証されます。