Drawing 3D objects

Question

I'm looking to draw a 3D cylinder with javascript by copying the layers and applying an increased margin to these elements. I have tried to set the height of the element in my input and run the copy function while total margin of the copied elements is lower than the set height of elements.

http://jsfiddle.net/yuX7Y/3/

<form>
        <input type="number" id="userHeight" />
        <button type="submit" onclick="circleHeight">Submit</button>
</form>

<div class="circle">
</div>
<div class="slice">
</div>

    $(document).ready(function(){

    var initMargin = 4;
    var totalMargin = 0;
    var i = 0;

    function copy(){
        $(".slice").clone().appendTo( ".content" ).css({'margin-top': totalMargin + "px"});
        console.log("cloned");
        i++;
        totalMargin = initMargin + 4;
        }
    function setH(){
        while(i < (document.getElementById("userHeight").value)){
            copy();
        }
        if(i>100){
            initMargin = 4;
            i=0;
        }
    }
});

Answer 1

Jump To The Result : http://jsfiddle.net/yuX7Y/15/

Notes

This Fiddle/question intrigued me so I went ahead and looked at it for a little while. There were actually a number of issues, some obvious and some less obvious. Somewhat in the order I noticed them these are some of the issues:

• jQuery wasn't included in the fiddle

• The click event wasn't wired up correctly - it was actually trying to submit the form. You need to use e.preventDefault to stop the form from submitting. Since you were already using jQuery I just wired up with the jQuery click event:

   $("#recalculateHeight").click(function (e) { e.preventDefault(); setH(); }); 

• Because of the use of "global" variables (variables not initialized within the routines), the submit would only work once. Instead of this, I moved variable declarations to the appropriate routine.

• Calling $(".slice").clone() clones ALL slice elements on the page. The first time you clone, this is fine. But after that you are cloning two elements, then three elements, etc (as many slice elements as are on the page). To solve this I created a slice template like:

   <div class="slice" id="slice-template" style="display: none"></div> 

  Then you can clone to your hearts content like $("#slice-template").clone() . Just don't forget to call the jQuery show() method or set display back to block on the cloned element.

• Finally, if you want to repeat the process many times you need to be able to clear previous elements from the page. I find this easiest to do by creating containers, then clearing the contents of the container. So I put all of the "slices" into this container:

   <div class="content"> 

  Now when you want to clear the content node you can just call $(".content").empty(); .

I also made a few style based changes in my Fiddle, but those don't make it work or not work, they just help me read the code! So, there you have it! Best of luck!