Q&A
タグ内に書きたくないって事ですか？
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
はい、javascriptでクリックされたのを検知して動かすようにしたいです。
onclick自体hを一切書きたくないという事ですか？
onclickまたはaddeventlistener自体は書く必要があるので、全く書かないのは無理です。
htmlコード内に書く必要は無くてもjavascript内には絶対に書かなくてはいけません。
>はい、javascriptでクリックされたのを検知して動かすようにしたいです。
調べて何も出ない内容でしょうか。
回答2件
0
onclickの記述なしで実行されるようにしたいのですが、どう記述すればいいのか分かりません。
addEventListenerを使いましょう。
投稿2020/09/08 12:24
総合スコア145192
0
これってコードみたら丸わかりですよね。
オープンなソースでトレース可能なのがjsです。
難読化は可能ですがメンテナンス性を落としては本末転倒です
投稿2020/09/09 00:27
総合スコア114878
また、チェックボックスのクリックで色替えは処理が競合する
（上書きされる？）のであまりロジックとして適切ではありません
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">メニュー３
あなたの回答
tips
プレビュー
