問題

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¥
                

期待する画面

解答と解説(inputの値を取得して誕生日を祝おう)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

$('#birthday').on("change", function(){ 〜〜
とすることでinputの値に変更があった場合の検知ができます。
検知ができら「$(this).val()」で値を取得して
判別しましょう。

さらにスキルアップしたい方は公式LINEから「JavaScript」と送信すると動画が見れます。

LINE登録して動画を視聴する
最大300,000円OFF キャンペーン実施中!
2024 BLACK FRIDAY 学び応援セール実施中!