JavaScriptでプログラミング(4)
fake-eng前回までのコードでは、入力した文字は表示できましたが、それがそのままブラウザに残ってしまう状態でした。これをブラウザから消すように作り直します。
「クリア」ボタンを押すとブラウザの表示を消す仕組みを追加します。
<!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><button type="submit" onclick="clean()">クリア</button>
<hr>
<p id="moji"></p>
<script>
var hyoji = function(){
var text= document.getElementById("inputbox");
var moji= document.getElementById("moji");
moji.innerHTML="入力した文字は「" + text.value + "」です";
}
var clean = function(){
var text= document.getElementById("inputbox");
text.value="";
location.reload();
}
</script>
</body>
</html>「クリア」ボタンを押すと、関数[clean]が呼び出されます。その中身は、id="inputbox"の要素を取得し、その要素に空の値を代入後、ページをリロードすることで表示を消すことを可能にしています。
