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

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

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

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

Q&A

解決済

2回答

1296閲覧

Javascriptのイベントハンドラについて

ojgtmaga

総合スコア12

JavaScript

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

0グッド

0クリップ

投稿2016/11/03 15:23

編集2016/11/03 22:46

###前提・実現したいこと
現在、javascpirtの中で、DOMやイベントハンドラを独学ですが勉強しています。
まず、htmlのファイル内には、ボタンを作成しています。
また、最後に結果を表示する場所を作ってます。
実現したいことは、あ・い・う・え・おのボタンを作って、それらを順番に並び替えて見たいだけです。実際に5個ボタンを作り、それぞれ押すと違った文字が出るようにはなっているのですが、押すごとに毎回リセットされてしまいます。つまり、「あ」ボタンを押したら「あ」が表示されますが、次に「い」のボタンを押したら、「あ」は消えて、「い」だけが表示されるということです。今回、できたら、それが消えないで、連続で表示できるようにしたいです。このようにするため、色々と調べたのですがわかりませんでした。
一応jsファイルとhtmlファイルの2つで書いています。

もし分かる方がいらっしゃいましたら、ご教示のほどお願いいたします。一応、最終的には、あ〜んまで全部入力できるようになりたいですが、まずは、「あいうえお」だけでもできるようになりたいと思っています。

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

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

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

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

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

guest

回答2

0

ベストアンサー

JavaScript

1var result = document.getElementById( 'result' ); 2[].forEach.call( document.querySelectorAll( '[id^="Btn"]' ), n => { 3 n.addEventListener( 'click', e => { 4 result.textContent += n.textContent; 5 }, false ); 6} ); 7```**動くサンプル:**[https://jsfiddle.net/2pjywdq1/](https://jsfiddle.net/2pjywdq1/) 8 9--- 10 11【三章第二回 イベントリスナ — JavaScript初級者から中級者になろう — uhyohyo.net】 12[http://uhyohyo.net/javascript/3_2.html](http://uhyohyo.net/javascript/3_2.html) 13 14【EventTarget.addEventListener - Web API インターフェイス | MDN15[https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener) 16 17【querySelectorAllで帰ってきたNodeListを外部ライブラリを使わずにforEachしたい - Qiita】 18[http://qiita.com/yugo-yamamoto/items/b87470f118ac62dc6a8d](http://qiita.com/yugo-yamamoto/items/b87470f118ac62dc6a8d) 19 20document.querySelectorAll - Web API インターフェイス | MDN21[https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll](https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll) 22

投稿2016/11/03 16:45

編集2016/11/03 16:47
kei344

総合スコア69364

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

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

0

元の文字列に結合したいということでしょうか。

Javascript

1result.textContent = result.textContent + 'い';

投稿2016/11/03 16:18

yona

総合スコア18155

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問