Question

我是一名业余程序员，通过JavaScript和HTML从事基本的控制台游戏。

基本上，我使用文本输入字段输入文本，当我按Enter键时，文本将作为列表元素添加。我不确定为什么我的代码不起作用，但我知道当前的JS代码导致我的其余JS失败。欢迎任何帮助。更新：我从控制台收到此错误：未捕获TypeError：无法读取属性＆＃39; addEventListener＆＃39; of nullscript.js：1（匿名函数）这是HTML：

<!DOCTYPE html>

<html>
    <head>
        <link rel=stylesheet type="text/css" href="style.css" />
        <link rel="shortcut icon" href="res/icon.png"/>
                <script src ="script.js"></script>

    </head>

    <body>
        <div id="main">
            <div id="cmd">
                <input id="text_input" placeholder="Type a Command">
            </div>
            <div id="console">
                <ul id="consolelog"></ul>
            </div>
        </div>

    </body>
</html>

这是JavaScript：

    document.getElementById('text_input').addEventListener('keypress', function (event){
    if(event.which != 13){
        return;
    }
    else{
        var comment = document.createElement('li');
        comment.textContent = document.getElementById('text_input').value;
        document.getElementById('consolelog').appendChild(comment);
        document.getElementById('text_input').value = "";
    }
}); //a brace was missing here
alert("test");

这是一个codepen：http://codepen.io/anon/pen/dPKLOZ

Answer 1

问题只是缺少一个括号来关闭你传递给.addEventListener的功能：

document.getElementById('text_input').addEventListener('keypress', function (event){
    if(event.which != 13){
        return;
    }
    else{
        var comment = document.createElement('li');
        comment.textContent = document.getElementById('text_input').value;
        var data = document.getElementById('text_input').value
        document.getElementById('consolelog').appendChild(comment);
        document.getElementById('text_input').value = "";
    }
}); //a brace was missing here
alert("test");

Answer 2

document.getElementById('text_input').addEventListener('keypress', function (event){
if(event.which != 13){
    return;
}
else{
    var comment = document.createElement('li');
    comment.textContent = document.getElementById('text_input').value;
    var data = document.getElementById('text_input').value
    document.getElementById('consolelog').appendChild(comment);
    document.getElementById('text_input').value = "";
}
});
alert("test");

我在提供的codepen链接（http://codepen.io/anon/pen/dPKLOZ）上尝试了此代码，发现它正在运行。

为什么这个简单的列表元素加法器不起作用？

2 个答案: