Question

I swear, this question is probably some where else but I can’t find it!!!
But here it goes:
http://jsfiddle.net/YUgxE/

Javascript:

var update = $("#CalcUpdate");
var content = document.getElementById("CalcContent");

update.click(function() { //update
    content.innerHTML += "<div style='display: none' class='CalcOn'><input type='field' value='' class='CalcName'/>";
    obj = $(".CalcOn");
    obj.slideToggle(400,function() {
        obj.removeClass();
});

});

HTML:

<button id="CalcUpdate">update</button>

Really behind this is two problems:

1. Every time a new field is created, the previous field values are erased. (I don’t know why, it’s supposed to add new innerHTML lines, why do the previous values erase?)
2. If I rapidly click update, the functions overlap and I don’t know how to make one execute before the other in this format. I’ve seen other questions but they all involve using two functions or something else which I’m not trying to do.

Answer 1

You’re using jquery, so put it to use! 🙂 Here’s how I updated your script:

http://jsfiddle.net/YUgxE/3/

var $update = $("#CalcUpdate");
    var $content = $('#CalcContent');

$update.click(function() { //update
        var $obj = $("<div style='display: none' class='CalcOn'><input type='field' value='' class='CalcName'/>");
    $obj.appendTo($content).slideToggle(400, function() { $obj.removeClass() });
});

Items of note:

• Using jquery to look up content, similar to the way you looked up the update region
• Use jquery to construct a new object ($obj) instead of using innerHTML and adding the string
• using jquery append/appendTo to add $obj to $content instead of using innerHTML
• using $obj directly to do the slideToggle (thus, no lookup). This fixes the timing/order of operations problem you were seeing when clicking quickly.