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

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

新規登録して質問してみよう
ただいま回答率
85.50%
イベントハンドラ

マウスのクリックなどの特定の事象(イベント)が発生した時に実行される処理のことをイベントハンドラと呼びます。

JavaScript

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

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

Q&A

解決済

2回答

1008閲覧

javascriptのclickイベントの発火について

peacesign

総合スコア7

イベントハンドラ

マウスのクリックなどの特定の事象(イベント)が発生した時に実行される処理のことをイベントハンドラと呼びます。

JavaScript

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

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

0グッド

0クリップ

投稿2020/04/06 13:07

こんばんは。
いつもありがとうございます。

また、行き詰まりましたので、質問させて下さい。

JavaScriptで、clickイベントで発火させるつもりでコードを書いたのですが、
画面を読込した際に、勝手にイベントが発火してしまいます。

色々調べたりしましたが、原因がわかりませんでした。

実現したい仕様は以下の通りです。

①Startをクリック
②テキストの4文字目である1を取得(戻り値として返す)
③Nextをクリック
※この時、ディスプレイに何か入力がある場合とない場合で処理を分けてます。
④②の戻り値を連想配列(オブジェクト)のキーの一部となるように渡して、
連想配列(オブジェクト)を生成

コンソールログを確認すると、連想配列(オブジェクト)の生成はできているようですが、
ロード完了後に勝手に発火し、生成されてしまいます。

稚拙なコードで、見づらい箇所等多いかと思いますが、
解決策をご教示頂ければ幸いです。よろしくお願い申し上げます。

html

1 <div class="containar"> 2 <div class="textarea" > 3 <div class="displayarea" id="input-display"></div> 4 </div> 5 <div class="input"> 6 <div id="input-no1"></div> 7 <div id="input-no2"></div> 8 <div id="input-no3"></div> 9 <div id="input-no4"></div> 10 <div id="input-reset">Reset</div> 11 <div id="input-no5"></div> 12 <div id="input-no6"></div> 13 <div id="input-no7"></div> 14 <div id="input-no8"></div> 15 <div id="input-start">Start</div> 16 <div id="input-no9"></div> 17 <div id="input-no0"></div> 18 <div id="input-no00">00</div> 19 <div id="input-minus"></div> 20 <div id="input-next">Next</div> 21 </div> 22 </div> 23 <div class="ul" id="input-choice"> 24 <div id="navi-no1">No.1</div> 25 <div id="navi-no2">No.2</div> 26 <div id="navi-no3">No.3</div> 27 <div id="navi-no4">No.4</div> 28 <div id="navi-no5">No.5</div> 29 <div id="navi-no6">Final</div> 30 </div> 31

javascript

1function userStart(){ 2 let inputNow = document.getElementById('navi-no1'); 3 inputNow.style.color = '#14cc80'; 4 return inputNow.textContent.substring(3,4); 5} 6 7let inputStart = document.getElementById('input-start'); 8inputStart.addEventListener('click',userStart,); 9 10function userNext(a){ 11 let inputdisplay = document.getElementById('input-display'); 12 if(inputdisplay.textContent !== ''){ 13 let no = 'No.'+a; 14 console.log(no); 15 userInputList[no] = inputdisplay.textContent; 16 console.log(userInputList); 17 inputdisplay.textContent = ''; 18 }else { 19 let no = 'No.'+a; 20 console.log(no); 21 userInputList[no] = 'Next'; 22 console.log(userInputList); 23 inputdisplay.textContent = ''; 24 } 25} 26 27let inputNext = document.getElementById('input-next'); 28inputNext.addEventListener('click',userNext(userStart())); 29

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

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

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

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

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

guest

回答2

0

javascript

1inputNext.addEventListener('click',userNext(userStart()));

userNext(userStart())は、この行を通った瞬間に実行されてしまいます。

投稿2020/04/06 13:09

maisumakun

総合スコア145123

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

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

peacesign

2020/04/06 13:18

いつも教えて頂き、ありがとうございます。 本当に助かってます。 自分でも引き続き色々理解していきますが、また行き詰まってしまったら、よろしくお願い申し上げます。
guest

0

ベストアンサー

addEventListenerの第2引数は関数自体を渡す必要があるので、クリックするたびにuserNext(userStart())を実行するなら無名関数にでもしてください。

js

1inputNext.addEventListener( 'click', function() { userNext(userStart()); } );

投稿2020/04/06 13:12

kei344

総合スコア69366

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

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

peacesign

2020/04/06 13:17

早速ご回答頂き、ありがとうございました。 もっと勉強しようとおもいます。 ありがとうございましたm(_ _)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問