не может найти решение моей функции «addEventListener»

Question

Я застрял в проблеме, где я пытаюсь использовать addEventListener. Я пытался найти решения в Интернете, но я думаю, что мои знания ограничены, чтобы выбрать подходящий ответ.

Что я пытался вызывать функцию «addFile()», когда ключ нажат в этом примере, введите (13), к сожалению, ничего не происходит. Я могу добавить атрибут onkeypress на вход «add-file» со слегка отредактированным addFileOnKeyEvent (event), но я пытаюсь понять, что не так с моим eventListener.

Надеюсь, вы могли бы следовать моим объяснениям, так как это мой первый вопрос. :)

function addFile() { 
 
    var x = document.getElementById("add-file").value; 
 
    x = x + ".xml"; 
 
    var lbl = document.createElement("label"); 
 
    var node = document.createTextNode(x); 
 
    lbl.appendChild(node); 
 

 
    var element = document.getElementById("appendable"); 
 
    element.appendChild(lbl); 
 
} 
 

 
function addFileOnKeyEvent(event) { 
 
    var evt = event.keyCode; 
 
    var textField = document.getElementById("add-file").addEventListener("keypress", function() { 
 
    if (evt == 13) { 
 
     addFile(); 
 
    } 
 
    }); 
 
}

<label>Dateien</label> 
 
<input id="add-file" type="text" onclick="this.select();"> 
 
<button type="submit" onclick="addFile()">Hinzufügen</button> 
 
<div class="data-display"> 
 
    <span id="appendable"></span> 
 
</div>

Answer 1

На первом, addFileOnKeyEvent() никогда не вызывается, прежде чем где-либо. Поэтому вы должны называть это, когда пытаетесь добавить файл. Или вы должны привязать событие к текстовому полю по умолчанию.

Также не нужно передавать объект события addFileOnKeyEvent(). Событие должно быть записано в функции обратного вызова addEventListener.

function addFile() { 
 
    var x = document.getElementById("add-file").value; 
 
    x = x + ".xml"; 
 
    var lbl = document.createElement("label"); 
 
    var node = document.createTextNode(x); 
 
    lbl.appendChild(node); 
 

 
    var element = document.getElementById("appendable"); 
 
    element.appendChild(lbl); 
 
} 
 

 
function addFileOnKeyEvent() { 
 
    document.getElementById("add-file").addEventListener("keypress", function(event) { 
 
    var evt = event.keyCode; 
 
    if (evt == 13) { 
 
     addFile(); 
 
    } 
 
    }); 
 
} 
 
// call the function here 
 
addFileOnKeyEvent(); 
 

 
    // else just put the event handler part alone. The function is unnecessary here.

<label>Dateien</label> 
 
<input id="add-file" type="text" onclick="this.select();"> 
 
<button type="submit" onclick="addFile()">Hinzufügen</button> 
 
<div class="data-display"> 
 
    <span id="appendable"></span> 
 
</div>

Answer 2

Это не как работать события. Попробуйте это ...

document.getElementById("add-file").addEventListener(
    "keypress", 
    function(event) { 
     if (event.keyCode == 13) { 
      addFile(); 
     } 
    }); 

Вместо ...

function addFileOnKeyEvent(event) { 
    var evt = event.keyCode; 
    var textField = document.getElementById("add-file").addEventListener("keypress", function() { 
    if (evt == 13) { 
     addFile(); 
    } 
    }); 
}