ラジオボタンを使って別々の関数を呼び出したいです

前提・実現したいこと

ラジオボタンを使って別々の関数を呼び出したいです。

発生している問題・エラーメッセージ

javascript
1formタグ内にあるinputタグのonclickが機能しません.
2ラジオボタンの”2”中にも関数onClick(e)が機能してます。

該当のソースコード

HTML
1<body>
2  <form name="form1">
3    <input type="radio" name="button" value="1" onclick="onclick(e);" checked /> 1
4    <input type="radio" name="button" value="2" onclick="別の関数;"/> 2
5  </form>
6    <script src="operation.js"></script>
7</body>
8
9
10```ここに言語を入力
11```javascript
12var canvas = document.getElementById("canvas");
13
14  function onClick(e) {
15  //関数の中身は省略
16
17
18　canvas.addEventListener('click', onClick, false);

試したこと

inputタグにidを付けてみたりしましたがうまくいきませんでした。
初学者なため根本的に間違っていると思います。
よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

itagagaki

2021/08/13 02:48

作成をクリックしたら e is not defined 選択をクリックしたら別の関数 is not defined となりました。

dm8200

2021/08/13 03:05

修正依頼ありがとうございます。そちらは何かの検証ツールでの結果でしょうか。

dm8200

2021/08/13 08:20

お返事が遅くなり申し訳ありません。 chromeのデベロッパツールでエラーが確認できたのでこれから修正いたします。教えてありがとうございます。

行動規範の内容に同意します

回答1件

下記で別々の関数を呼び出せます。
関数名は区別しやすいように変えました。

html
1<form name="form1">
2 <input type="radio" id="radio_1" name="canvas" value="作成" checked> 作成
3 <input type="radio" id="radio_2" name="canvas" value="選択"> 選択
4</form>

js
1var canvas = document.getElementById("canvas");
2
3// 作成を押した時
4function onclick_1(e){
5	console.log("click");
6	var x = e.clientX - canvas.offsetLeft;
7	var y = e.clientY - canvas.offsetTop;
8	console.log("x:", x, "y:", y);
9	//円の描画は省略
10}
11
12// 選択を押した時
13function onclick_2(e){
14	console.log("click2");
15	var x = e.clientX - canvas.offsetLeft;
16	var y = e.clientY - canvas.offsetTop;
17	console.log("x:", x, "y:", y);
18	//円の描画は省略
19}
20
21// DOM読み込み時にクリック時の関数を設定
22window.addEventListener("load", function(){
23	document.getElementById("radio_1").onclick=onclick_1;
24	document.getElementById("radio_2").onclick=onclick_2;
25})

※上記ではJavaScript内で関数を設定しましたが、HTML上でonclickを設定する場合は、関数(argument[0])とすればいいようです。
参考）https://www.softel.co.jp/blogs/tech/archives/1689
<img onmouseover="**testFn(arguments[0])**" src="https://placehold.jp/150x150.png" alt="" />

投稿2021/08/14 17:11