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

Question

我正在学习JavaScript。

我创建了一个 input 和一个 button。因此，无论何时用户在输入中键入任何内容，它都会显示在列表项中。它按预期工作，但自动 space 和控制台错误困扰着我。

自动 space :- 第一个结果在 1 和 Rahul 之间没有 space。而其他结果之间有 space。结果被添加到两个不同事件的列表项中。 1）按回车键 2) 点击 add new 按钮

控制台错误

    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

这里：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();
}

Answer 2

您的问题在于您如何组织代码。

您只能在文档准备好时调用函数 onPress_ENTER。

对于事件，我建议您直接在内联调用中传递它。

您可以使用 preventDefault.

而不是 keyPressed=null;

为了重置输入字段，您可以这样写：

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

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

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

html

javascript

keypress