title: Cannot set property 'className' of null on form verification js script
body: <p>I am trying to make the border of a textbox red when a text that does not containthe "@" is typed in (it is an email checker). Unfortunately, this does not happen. </p>
  
  <p>I have tried to use a class that contains the new border color but unfortunately, it seems that this change is never applied. </p>
  
  <p>This is the html and js code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;title&gt;
      Sign Up Page
  &lt;/title&gt;
  &lt;link rel="stylesheet" href="style.css" media="screen"/&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;script&gt;
      function validateForm() {
  
              var x = document.forms["myForm"]["fname"].value;
              if (x == "") {
              alert("something must be filled out");
              return false;
              }
              else if (!(x.includes("@"))) 
             {
               alert("you must have to filled value with @");
  
   document.getElementById("nameT").style.color="red";
  
   document.getElementById("fname").className = 'error';
               return false;
             }
            }
   &lt;/script&gt;
  
   &lt;div class="ocean"&gt;
         &lt;div class="wave"&gt;&lt;/div&gt;
         &lt;div class="wave"&gt;&lt;/div&gt;
         &lt;/div&gt;
         &lt;h1&gt;
            &lt;center&gt;
               Whale
            &lt;/center&gt;
         &lt;/h1&gt;
         &lt;div class="loginbox"&gt;
  
           &lt;h2&gt;
             Login
           &lt;/h2&gt;
           &lt;form name="myForm" onsubmit="return validateForm()" 
           method="post"&gt;
               &lt;p id="nameT"&gt; email &lt;/p&gt;
               &lt;input type="text" name="fname" placeholder="enter 
     email" onblur="validateForm()"&gt;
                &lt;p name="passT"&gt; password &lt;/p&gt;
                &lt;input type="text" name="name" placeholder="enter 
     password"&gt;
                &lt;br&gt;
                &lt;input type="submit" value="Submit"&gt;
                &lt;br&gt;
                &lt;a href="#"&gt; 
                   Lost your password? 
                &lt;/a&gt;
                &lt;br&gt;
                &lt;a href="#"&gt; 
                   Create an account 
                &lt;/a&gt;
            &lt;/form&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  
    &lt;/html&gt;
  </code></pre>
  
  <p>This is the css code:</p>
  
  <pre><code> html, body { height: 100%; }
   body {
     background:radial-gradient(ellipse at center, rgba(255,254,234,1) 
   0%, rgba(255,254,234,1) 35%, #ffffff 100%);
    overflow: hidden;
   }
  
  .ocean { 
    height: 5%;
   width:100%;
   position:absolute;
    bottom:0;
   left:0;
   background: #ffffff;
   }
  
   .wave {
    background: url(https://s3-us-west- 
    2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x; 
    position: absolute;
    top: -198px;
    width: 6400px;
    height: 198px;
    animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) 
   infinite;
    transform: translate3d(0, 0, 0);
    }
  
  .wave:nth-of-type(2) {
   top: -175px;
    animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s 
    infinite, swell 7s ease -1.25s infinite;
    opacity: 1;
    }
  
    @keyframes wave {
    0% {
     margin-left: 0;
     }
     100% {
      margin-left: -1600px;
      }
      }
  
    @keyframes swell {
     0%, 100% {
     transform: translate3d(0,-25px,0);
     }
     50% {
      transform: translate3d(0,5px,0);
     }
    }
  
    .loginbox
   {
    width: 340px;
    height: 360px;
    background: #000;
    color: #fff;
    top: 50%;
    left:50%;
    position: absolute;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    }
   h2
  {
    margin: 0;
    padding: 0 0 20px;
    text-align: center;
    font-size: 22px; 
  }
  
  
  
   .loginbox input
  {
   width: 100%;
   margin-bottom: 20px;
  }
  
  .loginbox input[type="text"], input[type="password"]
  {
   border: none;
  
   border-bottom: 1px solid #fff;
   background: transparent;
   outline: none;
   height: 40px;
   color: #fff;
   font-size: 16px;
   }
  
   .loginbox input[type="submit"]
   {
   border: none;
   outline: none;
   height: 48px;
   background: #fb2525;
   color: #fff;
   font-size: 18px;
   border-radius: 20px;
   } 
  
   .loginbox input[type="submit"]:hover
   {
    cursor: pointer;
    background: #ffc107;
    color: #000;
   }
  
   .loginbox a
   {
    text-decoration: none;
    font-size: 12px;
    line-height: 20px;
    color: darkgrey;
   }
  
   .loginbox p
   {
     margin: 0;
     padding: 10px;
     font-weight: bold;
    }
    .loginbox a:hover
    {
      color: #ffc107;
    }
      .error{
       border:2px solid red;
       }
  </code></pre>
  
  <p>The expected output is the border becoming red if the "@" symbol is not typed into the email textbox. The actual result is no such effect and instead, a "cannot set property 'className' of null" error.</p>