title: Not able to access input value using js
body: <p>I wanted to do some validation of inputs being given from the user, but I am not able to access the input values. onfoucs and onblur events I want to fetch the values from input field. 
  I have used  plain javascript by adding event listener to perform the validation of the value.</p>
  
  <pre><code>  &lt;div class="main"&gt;
        &lt;form action="#"&gt;
          &lt;div class="columns"&gt;
            &lt;div class="column is-size-4 is-one-fifth"&gt;
              &lt;label for="name"&gt; &lt;span class="is-uppercase"&gt;Name&lt;/span&gt;&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="column is-two-fifth"  data-validator="Name is required"&gt;
              &lt;input class="is-size-5" type="text" name="first-name" placeholder="first name" id="fname" value="1"&gt;
            &lt;/div&gt;
            &lt;div class="column is-two-fifth"&gt;
              &lt;input class="is-size-5" type="text" name="last-name" placeholder="last name" id="lname"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="columns"&gt;
            &lt;div class="column is-size-4 is-one-fifth"&gt;
              &lt;label for="email"&gt; &lt;span class="is-uppercase"&gt;Email&lt;/span&gt;&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class="column is-two-fifth"&gt;
              &lt;input class="is-size-5" type="text" name="email" id="email" placeholder="Your email"&gt;
            &lt;/div&gt;
            &lt;div class="column is-two-fifth"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="columns"&gt;
            &lt;div class="column"&gt;
              &lt;button type="submit"&gt;Submit&lt;/button&gt;
              &lt;button type="reset"&gt;Reset&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
    &lt;/div&gt;
  &lt;script&gt;
  
      let inputEvent =() =&gt;{
        let form = document.forms[0];
        let input1 = document.getElementById('fname');
        let input2 = document.getElementById('lname');
        input1.addEventListener('focusout', ()=&gt;{
          // if (!input.value.contains("@")) {
          //   input.classList.add('invalid')
          // }
          let elem = form.elements.first-name;
          console.log(fname.value)
          alert("The entered value is ", fname.value)
        })
  
        // input1.addEventListener('focusin', ()=&gt;{
        //   if(this.classList.contains('invalid')){
        //     this.classList.remove('invalid')
        //   }
        // })
      }
      inputEvent()
    &lt;/script&gt;
  </code></pre>