JavaScriptでテキストボックスの値を取得して表示する

フォームのテキストボックスを作成

空のテキストボックス

空のテキストボックスです。
inputタグで簡単に作れます。あとでテキストボックスやボタンを追加するので、formタグでくくっておきます。

<form name="form_001">
<input type="text" name="textBox_001"> 
</form>

テキストボックスのセンタリング

divタグでくくり、class="al-c"とすることで、フォーム全体をセンタリングできます。

<div class="al-c">
<form name="form_001">
<input type="text" name="textBox_001"> 
</form>
</div>

デフォルトで文字列を入力

inputタグのvalue属性に文字列をセットすることで、デフォルトで文字列を入力できます。

<div class="al-c">
<form name="form_001">
<input type="text" name="textBox_001" value="テキストボックスです"> 
</form>
</div>

縦横の幅を指定

inputタグにstyle属性を追加して、width, heightを指定します。
下記は、width:400px;height:30pxとしました。

<div class="al-c">
<form name="form_001">
<input type="text" name="textBox_001" style="width:400px;height:30px" value="テキストボックスです"> 
</form>
</div>

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

ボタンを作成

inputタグので、type="button"とすることでボタンを作成できます。

<div class="al-c">
<form name="form_001">
<input type="text" name="textBox_001" style="width:200px;height:30px" value="テキストボックスです">
<input type="button" value="ボタンです">
</form>
</div>

ボタンクリックでテキストボックスの中身を表示

いよいよ、JavaScriptです。
scriptタグでくくって、functionを定義します。
下記は、上(name="textBox_002")のテキストボックスの文字列を、下(name="textBox_003")のテキストボックスに表示します。

<script>
function clickButton_001(){
    const text = document.form_003.textBox_002.value;
    document.form_003.textBox_003.value = text;
}
</script>

ボタンクリック時に、clickButton_001()が実行されるようにします。
ボタンのonclick属性にclickButton_001()を設定します。

<div class="al-c">
<form name="form_003">
<input type="text" name="textBox_002" style="width:200px;height:30px" value="テキストボックスです">

<input type="text" name="textBox_003" style="width:200px;height:30px" value="">
<input type="button" value="ボタンです" onclick="clickButton_001()">
</form>
</div>
<script>
function clickButton_001(){
    const text = document.form_003.textBox_002.value;
    document.form_003.textBox_003.value = text;
}
</script>

数値をテキストボックスで扱う

type="number"にして、テキストボックスを作成します。
数値のみ入力可能となり、入力された値を数値として扱えます。

<div class="al-c">
<form name="form_004">
<input type="number" name="textBox_001" style="width:200px;height:30px">
<input type="number" name="textBox_002" style="width:200px;height:30px">
<input type="button" value="3倍する" onclick="clickButton_002()">
</form>
</div>
<script>
function clickButton_002(){
    const number = document.form_004.textBox_001.value;
    document.form_004.textBox_002.value = number * 3;
}
</script>

テキストボックスの値をクリア

新たにリセットボタンを追加します。

<input type="button" value="リセット" onclick="clickButton_004()">

JavaScriptでテキストボックスの値をリセットする関数を書きます。

function clickButton_004(){
    const number = document.form_005.textBox_001.value;
    document.form_005.textBox_001.value = "";
    document.form_005.textBox_002.value = "";
}

リセットボタンをクリックしたら、値をリセットする関数が呼ばれるようにします。

<div class="al-c">
<form name="form_005">
<input type="number" name="textBox_001" style="width:200px;height:30px">
<input type="button" value="3倍する" onclick="clickButton_003()">
<input type="number" name="textBox_002" style="width:200px;height:30px">
<input type="button" value="リセット" onclick="clickButton_004()">
</form>
</div>
<script>
function clickButton_003(){
    const number = document.form_005.textBox_001.value;
    document.form_005.textBox_002.value = number * 3;
}
function clickButton_004(){
    const number = document.form_005.textBox_001.value;
    document.form_005.textBox_001.value = "";
    document.form_005.textBox_002.value = "";
}
</script>