Question

i have the following code that i was hoping would allow me to click a button and add another box to the page but inj stread it just resets the page every time i click one of the buttons

<style>
    div.box 
    { 
        width: 50px; 
        height: 50px; 
        background-image: url("Images/smallBox.jpg"); 
    }

    div.largeBox 
    { 
        width: 100px; 
        height: 100px; 
        background-image: url("Images/largeBox.jpg");
    }
</style>
<script type="text/javascript">
    $(function () {
        setupDragging();
    });
    function setupDragging() {
        $(".box").draggable({ snap: true });
        $(".largeBox").draggable({ snap: true });
    }
    function addSmallBox() {
        var boxArea = document.getElementById('boxArea');
        var newBox = document.createElement('div');
        newBox.setAttribute('class', 'box');
        boxArea.appendChild(newBox);
        setupDragging();
    }
    function addLargeBox() {
        var boxArea = document.getElementById('boxArea');
        var newBox = document.createElement('div');
        newBox.setAttribute('class', 'largeBox');
        boxArea.appendChild(newBox);
        setupDragging();
    }
</script>
<form>
<button onclick="addSmallBox();">small box</button>
<button onclick="addLargeBox();">large box</button>
</form>

<div id="boxArea">
</div>

please can somebody let me know what i am doing wrong and how i can achieve what i want.

ANSWER:

just an update on the final result

    <style>
    div.box 
    { 
        width: 50px;
        height: 50px;
        background-image: url("../Images/smallBox.jpg");
        position: absolute;
    }

    div.largeBox 
    { 
        width: 100px;
        height: 100px;
        background-image: url("../Images/largeBox.jpg");
        position: absolute;
    }
</style>
<script type="text/javascript">
    $(function () {
        setupDragging();
        $('.addBox').click(function(e){
        if($(this).hasClass('smallBox')) addSmallBox();
        else if($(this).hasClass('largeBox')) addLargeBox();
        e.preventDefault();
        })
    });
    function setupDragging() {
        $(".box").draggable({ snap: true });
        $(".largeBox").draggable({ snap: true });
    }
    function addSmallBox() {
        $('<div>', { class: 'box' }).appendTo('#boxArea')
        setupDragging();
    }
    function addLargeBox() {
        $('<div>', { class: 'largeBox' }).appendTo('#boxArea')
        setupDragging();
    }
</script>
<form>
<button class='addBox smallBox'>small box</button>
<button class='addBox largeBox'>large box</button>
</form>

<div id="boxArea">
</div>

i made use of several of the answers below and this was the final result but went down the html5 route in the end.

Answer 1

First of all, since you are using jQuery, if I were you, I would not use the onclick attribute in your button. Instead, add an event listener like so:

$('button').click(function(){
  addLargeBox();
  return false;
});

OR

$('button').click(function(e){
  addLargeBox();
  e.preventDefault();
});

Both of which will prevent the user’s browser from following the link but will execute the JavaScript as you want.

Also, since you require two different functions to be executed depending on which button is clicked, you should probably add a class or id to differentiate the two.

Your markup would then look like this:

<button class="add-box">small box</button>
<button class="add-box large-box">large box</button>

And your JavaScript would be:

$('.add-box').click(function(){
  if ($(this).hasClass('large-box')) addLargeBox();
  else addSmallBox();
  return false;
});