2016-07-31 17 views
0

Ich habe Probleme, mein Formular zu leeren, sobald ein Text angehängt wurde, wird es nicht gelöscht. Es funktionierte gut, wenn es keine separate Funktion war. Ich wollte, dass der Code mit enter funktioniert, und das schien der einfachste Weg zu sein. Ich habe andere Methoden versucht, die hier erwähnt werden, wie .clear und .reset, aber sie scheinen, meine Seite neu zu laden, die irgendwelche geschaffenen Divs löscht. Ich habe versucht, den Code zu verschieben und eine völlig separate Funktion zu erstellen, beide hatten keine Wirkung. Ich erhalte auch keine Fehlermeldungen in meiner Konsole. Hat jemand irgendwelche Vorschläge, warum dies passieren könnte?Formular kann nicht leer sein

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> 
+0

Wo ist das Element mit der ID 'action'? Zeigen Sie Ihr HTML. Wie auch immer, um den Aktionswert zu löschen, versuchen Sie '$ ('# action'). Val (" ");' anstelle von $ ('# action'). Val() === ""; ' –

+0

Zeigen Sie HTML-Code – jonju

+0

ok, nur hinzugefügt – l34lo1

Antwort

1

Es sieht aus wie es nur ein Missbrauch von .val() ist.

Wert zu löschen, verwenden Sie diese

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

Denn:

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

ein Vergleich ist ... und das resultierende wahr/falsch einfach in einer Variablen nicht gefangen.
Es gibt keinen Skriptfehler für jQuery ... Es ist ein Logikfehler des Programmierers.

Siehe codePen here.

+0

Vielen Dank !! es hat perfekt funktioniert – l34lo1

Verwandte Themen