Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Since there's clearly a problem somewhere else... and since you're not fully using the potential of JQuery, I've taken the liberty of rewriting the code you've provided. Here it is :</p> <pre><code>&lt;head&gt; &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt; &lt;/script&gt; &lt;script type="text/javascript"&gt; var _comment_counter = 0; function Comment(msg){ var comment = $('&lt;div&gt;&lt;/div&gt;') .attr('id', "comment" + (_comment_counter++)) .text(msg); $('&lt;input type="submit"&gt;&lt;/input&gt;').val('reply') .appendTo(comment); $('&lt;input type="submit"&gt;&lt;/input&gt;').val('delete') .click(function() { deleteComment(comment); }) .appendTo(comment); $('&lt;ul&gt;&lt;/ul&gt;') .appendTo(comment); return comment; } function addComment(comment) { $("ul#wall").prepend( $('&lt;li&gt;&lt;/li&gt;').hide().append(comment).fadeIn() ); } function deleteComment(comment){ comment.parent().fadeOut('normal', function() { $(this).remove(); }); } &lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ var _defaultValue = "Write a message"; $("#newMessageTxt") .height("200px") // ??? use a textarea ? .val(_defaultValue) .focus(function() { if ($(this).val() == _defaultValue) { $(this).val(''); } }) .blur(function() { if(/^\s*$/.test($(this).val())) { $(this).val(_defaultValue); } }) ; $("form#newMessage").submit(function(){ var msg = $("input#newMessageTxt").val(); if (msg != _defaultValue) { var newComment = new Comment(msg); addComment(newComment); $("input#newMessageTxt").val(_defaultValue); } return false; }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="message"&gt; &lt;form id="newMessage"&gt; &lt;input type="text" id="newMessageTxt" /&gt; &lt;input type="submit" value="Submit" /&gt; &lt;/form&gt; &lt;/div&gt; &lt;ul id="wall"&gt; &lt;/ul&gt; &lt;/body&gt; </code></pre> <p>** <strong>TIPS</strong> **</p> <ul> <li>adopt a coding style, and use it <em>everywhere</em></li> <li>if you're using a library, use it or else you're not respecting the point above</li> <li>separate code and layout; HTML is a layout, Javascript is code. You shouldn't put socks in your t-shirt drawer...</li> <li>if you have a delete function, you should have an add function. This goes for all <a href="http://en.wikipedia.org/wiki/CRUD_%28acronym%29" rel="nofollow">CRUD</a> operations</li> </ul> <p>Now, this code works, you should perhaps start from there.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload