본문 바로가기

Front-end/node

let, var(), if/else를 사용한 간단예제_01

반응형

input 입력값에 따른 출력하기

조건
  • 5미만 일 경우
  • 5 일 경우
  • 5이상 일 경우
 <div class="wrap">
        <p>1~10 숫자를 입력하세요</p>
        <input id="number" type="text" value="5"><button class="check">확인</button>
        <span class="color">num</span>
</div>
  <script>
    $('.check').click(function(){

      let num = $('#number').val();
      console.log(num);

      if(num < 5){
        $('.color').text('5보다 작습니다')
        $('.color').css({
          "background-color":"indianred"
        })
      }else if(num == 5){
        $('.color').text('5입니다')
        $('.color').css({
          "background-color":"royalblue"
        })
      }else {
        $('.color').text('5이상입니다')
        $('.color').css({
          "background-color":"yellowgreen"
        })
      }
    })
  </script>

 

반응형