JavaScript ボタン要素にonclick属性を追加する

追加方法

Attributeとして追加する

setAttributeで追加する。

<button id="button">ボタン</button>

const button = document.getElementById('button');
button.setAttribute('onclick', 'pushButton()');

※メソッド名の後の括弧を忘れないようにする

ページ読み込み後

<button id="button" onclick="pushButton()">ボタン</button>

Propertyとして追加する

onclickプロパティに追加する。

<button id="button">ボタン</button>

const button = document.getElementById('button');
button.onclick = pushButton;

※メソッド名の後の括弧は不要

addEventListenerで追加する

addEventListener第一引数にはonclickではなく、clickを渡す。

<button id="button">ボタン</button>

const button = document.getElementById('button');
button.addEventListener('click', pushButton);

※メソッド名の後の括弧は不要

コメントについて

mikawanaさんから頂いたコメントについて追記します。

上書きと追加

Attribute と Property によるクリックイベントの追加は、厳密には上書き。
例えば、以下のサンプルコード1では、ボタン押下後はpushButton1メソッドは実行されず、pushButton2メソッドのみ実行される。

• サンプルコード1

const button = document.getElementById('button');
button.setAttribute('onclick', 'pushButton1()');
button.setAttribute('onclick', 'pushButton2()');

function pushButton1() {
  alert('クリックされました -1-');
}
function pushButton2() {
  alert('クリックされました -2-');
}

これはsetAtrribute を onclickに変えても同様の動作をする（サンプルコード2）。

• サンプルコード2

const button = document.getElementById('button');
button.onclick = pushButton1;
button.onclick = pushButton2;

function pushButton1() {
  alert('クリックされました -1-');
}
function pushButton2() {
  alert('クリックされました -2-');
}

これらに対してaddEventListenerではメソッドが追加され、イベント時には両方実行される（サンプルコード3・画像1）。

• サンプルコード3

const button = document.getElementById('button');
button.addEventListener('click', pushButton1);
button.addEventListener('click', pushButton2);

function pushButton1() {
  alert('クリックされました -1-');
}
function pushButton2() {
  alert('クリックされました -2-');
}

• 画像1

また、サンプルコード4のように書くと、ページ読み込み後のonclick属性にはpushButton1メソッドが入っているにも関わらず（ページ読み込み後html）、ボタン押下時に実行されるのはpushButton2メソッドである（画像2）。

• サンプルコード4

const button = document.getElementById('button');
button.setAttribute('onclick', 'pushButton1()');
button.onclick = pushButton2;

function pushButton1() {
  alert('クリックされました -1-');
}
function pushButton2() {
  alert('クリックされました -2-');
}

• ページ読み込み後html

<button id="button" onclick="pushButton1()">ボタン</button>

• 画像2

参考記事