【JavaScript】テキストボックスの値を取得して表示してみる！【初級★】

今回はJavaScriptを使って、テキストボックスを作成し、その値をテキストとして表示するようなプログラムを作成していきたいと思います。

目標
作っていく！
- HTML
- JavaScript
まとめ

目標

ブレインキャット

テキストボックスになにか入力して、[ボタン]をクリックしてみてください！

ここの文字が変わります。

作っていく！

HTML

ブレインキャット

まず、HTML側を作っていきます！

<input type="text" id="textBox"/>
<input type="button" value="ボタン" onclick="onClick();"/>
<p class="area">ここの文字が変わります。</p>

<p class="area">ここの文字が変わります。</p>

JavaScript

<script>
    function onClick(){
        //テキストボックスの値を取得
        var value = document.getElementById("textBox").value;
        //値を設定する
        document.querySelector('.area').innerHTML = value;
        }
</script>

function onClick(){

//テキストボックスの値を取得

var value = document.getElementById("textBox").value;

//値を設定する

document.querySelector('.area').innerHTML = value;

}

</script>

メソッド「document.getElementById(ID)」を使うと、IDを指定してその中身を取得することができます。

メソッド「document.querySelector(セレクター)」を使うと、セレクターを指定してその要素を取得します。

ブレインキャット

まとめて書くとこんな感じです！

<input type="text" id="textBox"/>
<input type="button" value="ボタン" onclick="onClick();"/>
<p class="area">ここの文字が変わります。</p>

<script>
    function onClick(){
        //テキストボックスの値を取得
        var value = document.getElementById("textBox").value;
        //値を設定する
        document.querySelector('.area').innerHTML = value;
        }
</script>