JavaScriptを使ってHTMLページの固定した個所にテキストを出力する

HTMLで記述したページにボタンを配置して、ボタンをクリックしたらHTMLの固定した個所にテキストを出力する。

HTMLとCSS準備

当記事を今後、便利に利用するため、CSSも書き残すことにします。

HTML

<div class="button_group">
    <div class="button_line">
        <button id="btn01" type="button" class="btn" onclick="btnclick(1);">No1. button</button>
        <button id="btn02" type="button" class="btn" onclick="btnclick(2);">No2. button</button>
        <button id="btn03" type="button" class="btn" onclick="btnclick(3);">No3. button</button>
    </div>
    <div class="button_line">
        <button id="btn04" type="button" class="btn" onclick="btnclick(4);">No4. button</button>
        <button id="btn05" type="button" class="btn" onclick="btnclick(5);">No5. button</button>
        <button id="btn06" type="button" class="btn" onclick="btnclick(6);">No6. button</button>
    </div>
    <div class="button_line">
        <button id="btn07" type="button" class="btn" onclick="btnclick(7);">No7. button</button>
        <button id="btn08" type="button" class="btn" onclick="btnclick(8);">No8. button</button>
        <button id="btn09" type="button" class="btn" onclick="btnclick(9);">No9. button</button>
    </div>
</div>
<div id="message">Messageを表示する領域</div>

<button>タグでボタンを設置。

ボタンがクリックされたら、onclickでjavaのファンクションbtnclickを呼び出す。

btnclickを呼び出すとき、どのボタンが押されたかを識別するため番号を渡す。

messageというidでテキスト表示域を確保する。

CSS

.button_group
{
    text-align: center;
}
.btn
{
    width: 300px;
    height: 40px;
    cursor: pointer;
}
.btn:not(last-child)
{
    margin-right: 30px;
}
.button_line
{
    margin-top:50px;
}
#message
{
    margin-top: 150px;
    text-align: center;
}

CSSでボタンとテキストを表示する場所を配置する。

SCRIPT追加

<script>
    function btnclick(no)
    {
        let elmt    = document.getElementById("message");
        elmt.innerHTML  =   "No."   +   no  +   "がクリックされました"
    }
</script>

getElementByidでテキスト表示域の要素を取得。

innerHTMLで書き換えることで、テキストが出力した表に見える。