質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

4927閲覧

addEventListenerをネストした時のクリックイベントが正しく動作しない

sasa_

総合スコア140

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/07/05 15:24

編集2019/07/05 16:47

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/07/05 16:18

HTMLも提示してください。
sasa_

2019/07/05 16:31

すみません。下記になります。 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="test.js"></script> <title>sample</title> </head> <body> <form name="sample"> <button id="setBtn">SET</button> <input type="text" name="num" id="value"> <button id="startBtn">START</button> <button id="stopBtn">STOP</button> <!-- 略 --> ...となります。
kei344

2019/07/05 16:32

(質問文は編集できます)この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。
kei344

2019/07/05 16:33

また、HTMLは閉じタグが必要な物が多いです。その略し方では状況が再現できない可能性があります。
sasa_

2019/07/05 16:47

度々申し訳ございません。ご指摘ありがとうございます。
guest

回答3

0

動作しないとされているコードですが、問題なく動作するようです。
別の箇所に問題があるのではないでしょうか?
https://jsfiddle.net/12oasxy4/

クリック時(active)一瞬コンソールに表示されますがすぐに消えてしまいます

というのが気になるのですが、ボタンがsubmitボタンになっていて押した瞬間にページ移動が発生しているという事はないでしょうか?

投稿2019/07/05 16:23

編集2019/07/05 16:25
ku__ra__ge

総合スコア4524

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sasa_

2019/07/05 16:43

ありがとうございます! submit使うほどのものではないので、普通にbuttonにしていました。 作成していただいたサンプルのような記法では動作するのですが、今回はsetBtnをwindow.addEventListener('load', function(){ });のなかに設定することが目的なのですが、該当のソースコードのような書き方は難しいでしょうか?
guest

0

htmlファイル11行目を下記に変更しました。

html

1 2 <button type="button" id="setBtn">SET</button> 3

投稿2019/07/06 02:20

sasa_

総合スコア140

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

既に指摘されていますが、ボタン要素の規定値はsubmitなので、何も書かなければformを送信します。
type="button"にするか、特に送信する必要が無いのであればフォームを使わず書きましょう。

<button>: ボタン要素 - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/button#attr-type

type
ボタンの種別。以下の値を指定可能です。
submit: 自身が属するフォームのデータをサーバーに送信するボタンとなります。これは type 属性が指定されていない場合、もしくは属性値が動的に空にされたり不正な値にされた場合の既定の動作です。
reset: ボタンに紐づけられたフォームコントロールの値をすべて初期値に戻すリセットボタンになります。
button: type 属性に button を指定したボタンには、既定の動作はなく、クリックするなどしても何も起こりません。クライアントサイドスクリプトで要素にイベントを設定することにより、操作時の挙動を設定することができます。

投稿2019/07/05 16:55

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sasa_

2019/07/06 02:18

ありがとうございます...!ご指摘いただいてtypeが抜けていたことに気がつけました。 すごく初歩的なミスですね、すみません。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問