Автоматическое добавление лишнего места в результат и Uncaught TypeError: Не удается прочитать свойство «keyCode» неопределенного

Question

Я изучаю JavaScript.

Я создал input и button. Поэтому всякий раз, когда пользователь вводит что-либо на вкладке, он будет отображаться в элементе списка. Он работает так, как ожидалось, но автоматическая ошибка пространства и консоли вызывает меня.

Автоматическое пространство: - Первый результат не имеет места между 1 и Rahul. В то время как другой результат имеет место между ними. Результаты добавляются в элемент списка в двух разных событиях. 1) На клавишу ввода нажмите 2) нажмите на кнопку add new

Консоль ошибок

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

Answer 1

Ваш вопрос о том, как вы организовали свой код.

Вы можете вызвать функцию onPress_ENTER только документ готов.

Для мероприятия я предлагаю вам передать его непосредственно во встроенном вызове.

Вместо keyPressed = null; вы можете использовать preventDefault.

Для того, чтобы сбросить поле ввода вы можете написать:

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

но, когда вам нужно добавить это в список вы можете изменить эту строку:

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

к:

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

Пример:

// 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>

Answer 2

здесь: var count = 0; onPress_ENTER(); вы вызываете функцию без события. Вы должны удалить этот вызов

посмотреть на jsfiddle

document.getElementById('user_input').focus(); 
function onPress_ENTER() 
{ 
    var keyPressed = event.charCode || event.which; 
//if ENTER is pressed 
    if(keyPressed==13) 
    { 
     incre(); 
     keyPressed=null; 
    } 
    else 
    { 
     return false; 
    } 
} 
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); 
    document.getElementById('user_input').value = " "; 
    document.getElementById('user_input').focus(); 
}