不能空表

时间:2016-07-31 17:35:51

标签: jquery

我有一些麻烦让我的表格变空,一旦附加了任何文字,它就不清楚了。当它不是一个单独的函数时,它曾经工作正常,我希望代码与enter一起工作,这似乎是最简单的方法。我已经尝试过像.clear和.reset这样提到的其他方法,但它们似乎正在重新加载我的页面,它清除了任何创建的div。我试过移动代码以及创建一个完全独立的函数,两者都没有效果。我也没有在我的控制台中收到任何错误消息。有没有人对为什么会发生这种情况有任何建议?

var template = function(text) {
    return '<div class="event"><p>'+ text + ' -</p></div>'
};
var process = function(){
    var text = $('#action').val();
    var html = template(text);
    $(html).appendTo('.controller');
    $('#action').val() === "";
    $('.controller').scrollTop($('.controller')[0].scrollHeight);
    return false;

};
var main = function(){
    $('.submit').click(process);
    $(13).keyup(process);
};

$(document).ready(main);

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Lord of the Deathsticks</title>
    <link href="css/text-game.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="info">
        <h1 class="title">Lord of the Deathsticks</h1>
    </div>
    <div class="controller">
        <div class="event">
            <p>Hello!</p>
        </div>
        <div class="event">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
    <form class="form">
        <div class="form-container">
            <input type="text" class="input" id="action" placeholder="What will you do?">
            <button class="submit" type="btn">Ok</button>
        </div>  
    </form>


<script src="js/controllers/controller.js"></script>
<script src="js/model/characters.js"></script>
<script src="js/JQuery/jquery-3.1.0.js"></script>
<script src="js/JQuery/text-game-JQuery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</body>
     </html>

1 个答案:

答案 0 :(得分:1)

看起来这只是对.val()的误用。

要清除值,请使用

$('#action').val("");

因为:

$('#action').val() === "";

是一个比较......并且结果真/假根本不会被变量捕获。
jQuery没有脚本错误......这是程序员的逻辑错误。

请参阅codePen here