var name = document.getElementById('full-name') not working

Question

Hello everyone I am brand new to Javascript just started this month. I have to make form validator for Name, email, address etc. When I tried to store the users name in a var using getElementById it doesn't store the name. Instead when I do console.log(name) it returns this

Here is the code I am trying to use

var name = document.getElementById('full-name')

document.getElementById('purchase').addEventListener('click', function(){
  console.log(name)
  var nameCheck = /^[a-zA-Z]+ [a-zA-Z]+$/
  if(!nameCheck.test(name)){

      document.getElementById('error').innerText += '\nPlease provide a valid name'
  }  
  else{
     console.log('valid name given')
  }

<div class="control-group">
  <label class="control-label">Full Name</label>
  <div class="controls">
    <input id="full-name" 
           name="full-name" type="text" placeholder="full name" class="input-xlarge">
    <p class="help-block"></p>
  </div>

`var name = document.getElementById('full-name')` should be `var name = document.getElementById('full-name').value` — VLAZ, Feb 28 '21 at 16:33
@VLAZ As long as you put it inside of the event listener. Otherwise `name` will always be an empty string. — Ivar, Feb 28 '21 at 16:36

score 1 · Answer 1 · answered Feb 28 '21 at 16:29

var nameElement = document.getElementById('full-name')
document.getElementById('purchase').addEventListener('click', function(){
        // https://stackoverflow.com/questions/11563638/
        var name = nameElement.value // use Dom 's value
        console.log(name)
        var nameCheck = /^[a-zA-Z]+ [a-zA-Z]+$/
        if(!nameCheck.test(name)){
            
            document.getElementById('error').innerText += '\nPlease provide a valid name'
        }  
        else{
           console.log('valid name given')
        }

var name = document.getElementById('full-name') not working

1 Answers1