CODEWITHSUNDEEP
javascriptjqueryhtml
harryovers
harryovers

Reputation: 3138

inserting divs with javascript

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.

Upvotes: 0

Views: 390

Answers (5)

Scott Greenfield
Scott Greenfield

Reputation: 2828

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;
});

Upvotes: 1

John Connelly
John Connelly

Reputation: 141

I'm not sure why just by glancing at the code, but perhaps you could try retrieving the boxArea.InnerHTML, appending the appropriate HTML string to it, and setting the boxArea.InnerHTML to the result.

Something like:

boxArea.InnerHTML = boxArea.InnerHTML + "<div class='largeBox'></div>";

Upvotes: 0

Brad Christie
Brad Christie

Reputation: 101594

Couple of things:

  1. Always separate JS from code (that means lose the onclick attributes and bind them in javascript instead.)
  2. The form is still being submitted; have your functions return false/preventDefault (jQuery) to avoid this.

Some hints:

  1. Since you're already using jQuery, why not build html elements with it? ($('<div>',{class:'box'}).appendTo('#boxArea') for instance)

Upvotes: 1

Jivings
Jivings

Reputation: 23250

The button tag you are using is a HTML5 version of a form submit button which causes a page refresh. Change the buttons to:

<input type="button" onclick="addSmallBox();" value="small box" />

Or put return false at the bottom of each of your javascript functions.

Upvotes: 1

Chris Pratt
Chris Pratt

Reputation: 239240

You have to return false from the click event to prevent the default browser behavior of following the link.

Upvotes: 0

Related Questions