若干、力技の無理矢理感が否めませんが…とりあえず意図した通りに動いたのでOKとします！
今回は、JavaScript で <button> 要素などに定義されている onclick の処理の内容を書き換える方法についてです。
参考にさせていただいたサイトはこちら。
JavaScriptやjQueryでイベントを削除して再登録する方法 – Qiita
https://qiita.com/zaru/items/878b892e4debf03785e3
さて、JavaScript の書き換えですが、私は addEventListener を使いました。
サンプルコードは下記の通りです。
まず、HTML の <button> 要素を下記のように定義します。
<button id="button" onclick="alert('変更前のアラートです');">Click</button>
変更前は、ボタンをクリックすると「変更前のアラートです」というアラートが表示されます。
JavaScript のコードはこちらです。
let newevent = function() {
alert("変更後のアラートです");
};
document.getElementById('button').onclick = "";
document.getElementById('button').addEventListener("click", newevent);
1〜3行目で、新しく実行したい処理を書いた関数を定義します。
今回は、「変更後のアラートです」というアラートが表示されるようにしました。
そして、5行目でもともと定義されている処理を削除し、6行目で、新しい onclick の処理を定義しています。
実装するのはこれだけです！
実際に上記のコードを実行してみると、ボタンをクリックした時に「変更後のアラートです」というアラートが表示されるはずです！
なお、検証ツールを起動して確認してみたところ、HTML に書かれている内容は変更前のままでした。
また、てっきり addEventListener を使えば、処理が上書きされるのだと思いきや、5行目の処理を無くすと、2つのアラートがどちらも表示されました。
今回はアラートなので、別に 2つとも表示されてもそこまで困らなかったのですが、場合によっては、前の処理が実行されては困る場合もあると思います。
その場合は、必ず onclick に null を代入してから、addEventListener で新しい処理を定義するようにしてください。
以上、JavaScript で onclick の処理の内容を書き換える方法についてでした。
ご参考になれば幸いです。
