前提・実現したいこと
JavaScriptのaddEventListener()について御助力いただけると嬉しいです。
日頃あまりaddEventListener()を使用したことがなく、どこに問題が発生しているのかわかりません。問題点をご指摘いただきたく質問させていただきます。
「画面読込後初期画面を表示」→「ボタンクリックでイベント発生」の流れで設計するとき、addEventListener()で処理したいのですが下記のコードでは正常に動作しません。
現状setBtnにこの関数のクリックイベントがネスト状態で、こちらは普通に動作します。
JavaScript
1setBtn.onclick = function example() { 2 var n = parseInt(document.sample.num.value, 10); 3 var numList = [...Array(max).keys()].map(i => ++i); 4 // etc... 5 startBtn.addEventListener('click', function(){ /* 略 */ }); 6 stopBtn.addEventListener('click', function(){ /* 略 */ }); 7 // etc... 8
あまりネストばかりにしたくはないのですが、
- リスト画面読込でsetBtn.disabled=true、ボタンクリックでfalseにしたい
- setBtnで取得した値の回数分イベントと結果の振り分けを繰り返していく
都合上、可能であればaddEventListenerで処理したいと考えています。
下記のコードでクリックイベントを試してみたのですが、クリック時(active)一瞬コンソールに表示されますがすぐに消えてしまいます。エラー表記がないので原因が特定できず困っています。
発生している問題・エラーメッセージ
- エラーメッセージが出ない - コードも出ない
該当のソースコード
JavaScript
1window.addEventListener('load', function(){ 2 var set = document.getElementById('setBtn'); 3 console.log(set); 4 // セットクリック 5 set.addEventListener('click', function() { 6 console.log(set); 7 }); 8}, false);
html
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<link rel="stylesheet" type="text/css" href="style.css"> 6<script type="text/javascript" src="test.js"></script> 7<title>sample</title> 8</head> 9<body> 10 <form name="sample"> 11 <button id="setBtn">SET</button> 12 <input type="text" name="num" id="value"> 13 <button id="startBtn">START</button> 14 <button id="stopBtn">STOP</button> 15 <button id="resetBtn">RESET</button> 16 </form> 17</body> 18</html> 19
試したこと
setの宣言をやめて直接document.getElementById('setBtn').addEventListener()にするなどはしてみました。コンソールの中身を'hoge'にしても何も出ない...hogehoge...何かすごく単純なミスをしている?
補足情報(FW/ツールのバージョンなど)
Dreamweaver / chrome
回答3件
あなたの回答
tips
プレビュー