JavaScriptでプログラミング(3)
前回は入力した文字を表示するものでしたが、ボタンを押すとそれまでの表示がすべて消えてしまうような作りになっています。そこで、入力した文字をボタンの下に表示するというように作り直します。
具体的にはボタンの下に横線を引いて、その下に”入力した文字は「~」です”と表示するようにします。コードは以下の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label>入力:<input id="inputbox" type="text"></label><br>
<button type="submit" id="hyoji" onclick="hyoji()">表示</button>
<hr>
<p id="moji"></p>
<script>
var hyoji = function(){
var text= document.getElementById("inputbox");
var moji= document.getElementById("moji");
moji.innerHTML="入力した文字は「" + text.value + "」です";
}
</script>
</body>
</html>
横線はHTMLの<hr>タグを使います。また、新たに<p>タグのid属性に"moji"をつけたものを加えます。
で、JavaScriptでinputboxに入力された文字を取得して変数textに、またid属性が"moji"の要素を取得して変数mojiにそれぞれ代入します。
その後、"moji"の要素に変数textの値を代入することで"入力した文字は「" + text.value + "」です"と表示させます。