「This」ボタンをクリックすると，『表示：』の横に「This」と表示され，「is」ボタンをクリックすると「is」，「pen」ボタンをクリックすると「pen」

JavaScriptを使って「I」ボタンをクリックすると，『表示：』の横に「I」と表示され，「am」ボタンをクリックすると「am」，「S」ボタンをクリックすると「S」と表示されるプログラムを教えていただきたいです。
<p class="q-body">
<button id="q3ThisBtn" value="This">Thisボタン</button>
<button id="q3IsBtn" value="is">isボタン</button>
<button id="q3ABtn" value="a">aボタン</button>
<button id="q3PenBtn" value="pen">penボタン</button><br>
表示：<span id="q3"></span>
</p>

これがHTMLのコードです。よろしくお願いします。

m.ts10806

2017/11/06 06:35

for,whileの2つは本件とは何か関係あるでしょうか？自身で組んでみたソースコードはありますか？また、調べてみたこと、やってみたこと、起きているエラーメッセージなどありましたらご提示ください。ないのであれば、まずは調べて組んでみてください。https://teratail.com/help/question-tips#questionTips1-2

行動規範の内容に同意します

回答1件

たとえば

javascript
1document.addEventListener('click',function(e){
2  var t=e.target;
3  if(t.nodeName=="BUTTON"){
4    document.querySelector("#q3").innerHTML=t.value;
5  }
6});