index.html

<!DOCTYPE html>
<html>
<head>
  <title>로그인</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
  <div class="login-form">
    <form>
      <input type="text" name="email" id="email-input" class="text-field" placeholder="아이디"><br>
      <input type="password" name="password" id="password-input" class="text-field" placeholder="비밀번호"><br>
      <input type="submit" value="로그인" id="submit-btn">
    </form>

    <div class="links">
      <a href="#">비밀번호를 잊어버리셨나요?</a>
    </div>
  </div>

  <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  <script>
    // 여기에 코드를 작성하세요.
    $('#email-input').on('input',processButton);
    $('#password-input').on('input',processButton);
    
    function processButton(){
      var email = $('#email-input').val();
      var pw = $('#password-input').val();
      if(email==null && pw==null){
        $('submit-btn').css('background-color','#9B9B9B');
      }else{
        $('submit-btn').css('background-color','#1BBC9B');
      }
    }
  </script>
</body>
</html>

styles.css

* {
  box-sizing: border-box;
  font-family: 'Noto Sans KR', sans-serif;
}

body {
  margin: 0;
  background-color: #1BBC9B;
}

.login-form {
  width: 300px;
  background-color: #eeeff1;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  border-radius: 5px;
  padding: 20px;
}

.text-field {
  font-size: 14px;
  width: 100%;
  border: none;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

#submit-btn {
  font-size: 14px;
  background-color: #9B9B9B;
  color: white;
  width: 100%;
  border-radius: 5px;
  padding: 10px;
  border: none;
}

#submit-btn:hover {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.50);
}

.links {
  margin-top: 30px;
  text-align: center;
}

.links a {
  font-size: 12px;
  color: #9b9b9b;
}

해당 email-input과 passwrod-input에 oninput 이벤트가 발생하면, processButton 함수를 실행하고,

processButton 함수에서는 email-input과 password-input에 입력된 값을 가져와

입력된 값이 모두 null값(입력되지 않음)이면 비활성화하고 값이 입력되어 있으면 활성화 시키는 코드로 작성했는데,

동작을 제대로 안합니다. 어떻게 해결할 수 있을까요??