javascript　onclickなしでメソッド実行したい

checkboxクリック時にjavascriptが実行されるようにしたい。

<input type="checkbox" onclick="hakoClick()"> クリックしたらjavascriptのメソッドが実行されるような、このレベルなんですが、これってコードみたら丸わかりですよね。

色々サイトのコードを見てもonclickで書いてるようなサイトがないですし、これって間違っていますか？

onclickの記述なしで実行されるようにしたいのですが、どう記述すればいいのか分かりません。教えて頂きたいです。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6</head>
7
8<body>
9  <p>サンプル
10    <div class="hako" id="box" style="border: solid 1px black;width:100px;height:50px;"></div>
11    <input type="checkbox" onclick="hakoClick()">メニュー１
12    <input type="checkbox" onclick="hakoClick1()">メニュー２
13    <input type="checkbox" onclick="hakoClick2()">メニュー３
14    <script>
15      function hakoClick() {
16        irobako = document.getElementById("box");
17        irobako.style.backgroundColor = "black";
18      }
19
20      function hakoClick1() {
21        irobako = document.getElementById("box");
22        irobako.style.backgroundColor = "red";
23      }
24
25      function hakoClick2() {
26        irobako = document.getElementById("box");
27        irobako.style.backgroundColor = "blue";
28      }
29    </script>
30</body>
31</html>
32

hentaiman

2020/09/08 13:08

タグ内に書きたくないって事ですか？

退会済みユーザー

2020/09/08 14:51

はい、javascriptでクリックされたのを検知して動かすようにしたいです。

hentaiman

2020/09/08 14:56

onclick自体hを一切書きたくないという事ですか？ onclickまたはaddeventlistener自体は書く必要があるので、全く書かないのは無理です。 htmlコード内に書く必要は無くてもjavascript内には絶対に書かなくてはいけません。

m.ts10806

2020/09/08 22:32

>はい、javascriptでクリックされたのを検知して動かすようにしたいです。調べて何も出ない内容でしょうか。

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

回答2件

onclickの記述なしで実行されるようにしたいのですが、どう記述すればいいのか分かりません。

addEventListenerを使いましょう。

投稿2020/09/08 12:24

maisumakun

総合スコア146018

これってコードみたら丸わかりですよね。

オープンなソースでトレース可能なのがjsです。
難読化は可能ですがメンテナンス性を落としては本末転倒です

投稿2020/09/09 00:27

yambejp

総合スコア116724

yambejp

2020/09/09 00:32

また、チェックボックスのクリックで色替えは処理が競合する（上書きされる？）のであまりロジックとして適切ではありません

yambejp

2020/09/09 00:33

HTMLからonclickをはずしたいだけならclassでも振ってください <script> window.addEventListener('DOMContentLoaded', ()=>{ const menu=document.querySelectorAll('.menu'); menu[0].addEventListener('click',hakoClick); menu[1].addEventListener('click',hakoClick1); menu[2].addEventListener('click',hakoClick2); }); function hakoClick() { irobako = document.getElementById("box"); irobako.style.backgroundColor = "black"; } function hakoClick1() { irobako = document.getElementById("box"); irobako.style.backgroundColor = "red"; } function hakoClick2() { irobako = document.getElementById("box"); irobako.style.backgroundColor = "blue"; } </script> <p>サンプル</p> <div class="hako" id="box" style="border: solid 1px black;width:100px;height:50px;"></div> <input type="checkbox" class="menu">メニュー１ <input type="checkbox" class="menu">メニュー２ <input type="checkbox" class="menu">メニュー３

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

あなたの回答