Automatically adding extra space to result and Uncaught TypeError: Cannot read property 'keyCode' of undefined

Question

I am learning JavaScript.

I have created a input and a button. So whenever user type anything in the input it will show in the list item. It is working as expected but the automatic space and console error is bugging me.

Automatic space :- The first result has no space between 1 and Rahul. Whereas other result have space between them. The results are added in list item in two different events. 1) On Enter key press 2) On click on add new button

Console error

    document.getElementById('user_input').focus();
    function onPress_ENTER()
    {
    	var keyPressed = event.keyCode || event.which;
    
    			        //if ENTER is pressed
    			        if(keyPressed==13)
    			        {
    			        	incre();
    			        	keyPressed=null;
    			        }
    			        else
    			        {
    			        	return false;
    			        }
    			    }
    
    			    var count = 0;
    
    			    onPress_ENTER();
    			    function incre(){
    			    	
    			    	
    			    	count += 1;
    			    	var text = document.createTextNode(count);
    
    			    	var el = document.createElement("li");
    	//get text from input box and create node
    	var user_input = document.getElementById('user_input').value;
    	var user_input_node = document.createTextNode(user_input);
    	
    	//create element node span and add user input inside span
    	var user_el = document.createElement('span');
    	user_el.appendChild(user_input_node);
    
    	//id of list item element
    	var id_el = document.getElementById('list_item');
    
    	//append counter inside the li
    	el.appendChild(text);
    	el.appendChild(user_el);
    
    	id_el.appendChild(el);
    	document.getElementById('user_input').value = " ";
    	document.getElementById('user_input').focus();
    
    }

<input type="text" id="user_input" onkeypress="onPress_ENTER()">
<input type="button" onclick="incre()" value="add new">

<ul id="list_item">
	
</ul>

Answer 1

Your issue is on how you organized your code.

You can call the function onPress_ENTER only at document ready.

For the event I suggest you to pass it directly in the inline call.

Instead of keyPressed=null; you can use preventDefault.

In order to reset the input field you can write:

// reset input
document.getElementById('user_input').value = "";
document.getElementById('user_input').focus();

but, when you need to add this to the list you can change this line:

 var user_input = document.getElementById('user_input').value;

to:

var user_input = " " + document.getElementById('user_input').value;

The example:

// when document is ready
document.addEventListener('DOMContentLoaded', function(e) {
  document.getElementById('user_input').focus();
  onPress_ENTER(e); // this is useless.....
});


// global func and var
function onPress_ENTER(e) {
  var keyPressed = e.keyCode || e.which;

  //if ENTER is pressed
  if (keyPressed == 13) {
    e.preventDefault();
    incre();
  }
}

var count = 0;

function incre() {
  count += 1;
  var text = document.createTextNode(count);

  var el = document.createElement("li");
  //get text from input box and create node
  var user_input = " " + document.getElementById('user_input').value;
  var user_input_node = document.createTextNode(user_input);

  //create element node span and add user input inside span
  var user_el = document.createElement('span');
  user_el.appendChild(user_input_node);

  //id of list item element
  var id_el = document.getElementById('list_item');

  //append counter inside the li
  el.appendChild(text);
  el.appendChild(user_el);

  id_el.appendChild(el);

  // reset input
  document.getElementById('user_input').value = "";
  document.getElementById('user_input').focus();

}

<input type="text" id="user_input" onkeypress="onPress_ENTER(event)">
<input type="button" onclick="incre()" value="add new">

<ul id="list_item">

</ul>