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


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

HTMLとCSS準備

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

HTML

<div 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>

<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で書き換えることで、テキストが出力した表に見える。

最後に！！

紹介したコードですが、簡単にコーディングできますが、一般的に推奨できません。

なぜなら、onclick=”btnclick(7);とHTMLコードの中にjavascriptのコードが混ざっているからです。

HTMLのコードとJavascriptのコードは分離した方が理想と言えるからです。

後にに分離したコードを紹介したいと思います。

 

コメント