問題
5
JavaScript
inputの値を取得して誕生日を祝おう
JavaScriptの問題に挑戦しよう！
問題
「inputの値を取得して誕生日を祝おう」
inputタグに入力した値を取得して、
自分の誕生日なら「おめでとう！」と表示させよう。
※bootstrapを読み込むと
見本通りのレイアウトが綺麗になります。
あらかじめエディタに書くコード
<div class="input-group mb-3">
<h1>誕生日おめでとう！</h1>
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="date" id="birthday" class="form-control" value="1990-01-01" placeholder="誕生日">
</div>
¥HTML¥
h1{
text-align: center;
color: red;
font-size: 50px;
width: 100%;
font-weight: bold;
color: #458fa0;
display: none;
}
.input-group{
width: 500px;
margin: 300px auto 0 auto;
}
¥CSS¥
期待する画面
解答と解説
解説
LINE登録して解答を見る
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
$('#birthday').on("change", function(){ 〜〜
とすることでinputの値に変更があった場合の検知ができます。
検知ができら「$(this).val()」で値を取得して
判別しましょう。
