l34lo1 l34lo1 - 1 year ago 44
jQuery Question

Cannot empty form

I am having some troubles getting my form to empty, once any text has been appended it does not clear. It used to work fine when it wasn't a separate function, I wanted the code to work with enter and this seemed to be the easiest way. I have tried other methods mentioned here like .clear and .reset but they seem to be reloading my page which clears any created div's. I have tried moving the code around as well as creating an entirely separate function, both had no effect. I am also not getting any error messages in my console. Does anyone have any suggestions as to why this might be happening?

var template = function(text) {
return '<div class="event"><p>'+ text + ' -</p></div>'
var process = function(){
var text = $('#action').val();
var html = template(text);
$('#action').val() === "";
return false;

var main = function(){



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

<div class="info">
<h1 class="title">Lord of the Deathsticks</h1>
<div class="controller">
<div class="event">
<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>
<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>

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


Answer Source

It looks like it is only a misuse of .val().

To clear a value, use


Because this:

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

is a comparison... And the resulting true/false simply isn't caught in a variable.
There is no script error for jQuery... It is a programmer's logic error.

See codePen here.