HTML･CSS｜JavaScriptのaddEventListenerを使ってみた

JavaScriptのaddEventListenerを使ってHTMLのどのボタンがクリックされたかを判定。

index.html

<body>
    <!--------------------------------------------------------->
    <!--  header    -->
    <!--------------------------------------------------------->
    <header>
        <h1>JavaScriptのaddEventListenerを使ってどのボタンが押されたか判定</h1>
    </header>
    <!--------------------------------------------------------->
    <!--  main    -->
    <!--------------------------------------------------------->
    <main>
        <div id="btngrp" class="button_group">
            <div class="button_line">
                <button id="btn01" type="button" class="btn">No1. button</button>
                <button id="btn02" type="button" class="btn">No2. button</button>
                <button id="btn03" type="button" class="btn">No3. button</button>
            </div>
            <div class="button_line">
                <button id="btn04" type="button" class="btn">No4. button</button>
                <button id="btn05" type="button" class="btn">No5. button</button>
                <button id="btn06" type="button" class="btn">No6. button</button>
            </div>
            <div class="button_line">
                <button id="btn07" type="button" class="btn">No7. button</button>
                <button id="btn08" type="button" class="btn">No8. button</button>
                <button id="btn09" type="button" class="btn">No9. button</button>
            </div>
        </div>
        <div id="message">Messageを表示する領域</div>
    </main>
    <!--------------------------------------------------------->
    <!--  footer    -->
    <!--------------------------------------------------------->
    <footer>
        <p>Copyright SSSPRODUCT All Rights Reserved.</p>
    </footer>
    <!--------------------------------------------------------->
    <!--  javascript読み込み    -->
    <!--------------------------------------------------------->
    <script type="text/javascript" src="sample.js"></script>
</body>

headerにh1でページのタイトルを表示。

ボタンを9個表示。

どのボタンがクリックされたかを表示する場所を定義。

bodyの終了タグ直前でJavaScriptファイルを読み込む。

styles.css

@charset "UTF-8";
*
{
    margin: 0;
    padding: 0;
}
header
{
    width: 100%;
    height: 80px;
}
header h1
{
    text-align: center;
    line-height: 80px;
}
.button_group
{
    text-align: center;
}
.btn
{
    width: 300px;
    height: 40px;
    font-size: 18px;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 3px 3px 5px black;
}
.btn:hover
{
    border-width: 2px;
    color: white;
    background-color: gray;
}
.btn:not(last-child)
{
    margin-right: 30px;
}
.button_line
{
    margin-top:50px;
}
#message
{
    margin-top: 150px;
    text-align: center;
}
footer p
{
    margin-top: 100px;
    text-align: center;
    color:lightslategray
}

cssで表示スタイルを整える。

ブラウザーで表示

cssで表示スタイルを整えた結果、このように表示されます。

sample.js

//  クリックイベントを追加
var elm =   document.getElementById("btngrp");
elm.addEventListener("click",getid,false);
//  クリックされたオブジェクトを取得
function    getid()
{
    var id_all  =   event.target.id;
    var id_btn  =   id_all.substr(0,3);
    var id_num  =   Number( id_all.substr(3,2));
    if  (   id_btn  ==  "btn"   )
    {
        messageput(id_num);
    }
}
//  メッセージ出力
function    messageput(no)
{
    var elmmessage  =   document.getElementById("message");
    elmmessage.innerHTML    =   "No."   +   no  +   "ボタンが押されました。"
}

document.getElementByIdでボタンタグの親要素のエレメントを取得。

addEventListemerでクリックイベントハンラーを装備。

event.target.idでどのボタンがクリックされたかを判定。

どのボタンがクリックされたかを判別できるテキストを表示。

ボタンをクリックした時をブラウザーで表示

No.5ボタンをクリック。

下に「No.5ボタンが押されました」と表示。