Automatisches Hinzufügen von zusätzlichem Speicherplatz zu Ergebnis und Uncaught TypeError: Kann die Eigenschaft 'keyCode' von undefined nicht lesen

Question

Ich lerne JavaScript.

Ich habe eine input und eine button erstellt. Wann immer Benutzer etwas in die Eingabe eingeben, wird es im Listenelement angezeigt. Es funktioniert wie erwartet, aber der automatische Raum- und Konsolenfehler nervt mich.

Automatischer Abstand: - Das erste Ergebnis enthält keinen Abstand zwischen 1 und Rahul. Während andere Ergebnis haben Platz zwischen ihnen. Die Ergebnisse werden in Listenelementen in zwei verschiedenen Ereignissen hinzugefügt. 1) Auf Taste drücken Sie die Eingabetaste 2) Bei einem Klick auf add new Taste

Console Fehler

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

Ihr Problem auf entfernen ist, wie Sie Ihren Code organisiert.

Sie können die Funktion onPress_ENTER nur im Dokument bereit.

Für das Ereignis empfehle ich Ihnen, es direkt in der Inline-Anruf übergeben.

Statt keyPressed = null; können Sie preventDefault verwenden.

Um das Eingabefeld zurücksetzen können Sie schreiben:

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

aber, wenn Sie das Sie zur Liste hinzufügen müssen können diese Zeile:

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

zu:

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

Das Beispiel:

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

hier: var count = 0; onPress_ENTER(); rufen Sie eine Funktion ohne Ereignis auf. Sie müssen diesen Anruf

Blick auf 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(); 
}