11

I have a script that places divs according the position of mouse on the body of a page. I have a button which says "Clear" and I want to use it to clear the divs created. How can I achieve that?

The script and source I have written:

HTML

<!DOCTYPE html>
<html>
    <body>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <script src="bhaiya.js"></script>
        <button style="z-index: 2000;" class="clear" onclick="clear()">Clear</button>
    </body>
</html>

jQuery

$(document).ready(function(){

    $(this).mousedown(function(e){
        $x = e.pageX;
        $y = e.pageY;

        $div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>";
        $("body").prepend($div);
    });

    function clear() {
        $(".theDiv").remove();
    }

})

jsFiddle: http://jsfiddle.net/BpAYz/

Any help would be appreciated :)

Improve this question

5 Answers 5

Reset to default
10

Inline html attribute event handlers can only call global functions. Your clear() function is not global because it is defined inside your document ready handler, so your onclick="clear()" can't find it. You need to either move the function outside the ready handler (making it global), or, better, bind the click with jQuery:

$(document).ready(function(){    
    $(this).mousedown(function(e){
        var $x = e.pageX;
        var $y = e.pageY;    
        var $div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>";
        $("body").prepend($div);
    });

    $(".clear").click(function () {
        $(".theDiv").remove();
    });
});

Note also that I've added var in front of the variables in your mousedown handler: without var they become global variables, which just makes your code more error prone and hard to debug. (Unless you have a good reason why they should be globals?)

Improve this answer
1
  • You're welcome. Note also <button> elements are submit buttons by default, and even though you don't have a form element or anything it's a good habit to use type="button" for buttons that are not intended to be submit buttons.
    – nnnnnn
    Commented Jun 8, 2013 at 11:56
2

The function clear should be in global scope. Otherwise give an id button1 to the button and add the function as the click event listener using jQuery.

http://jsfiddle.net/BpAYz/2/

Code:

JS

$(document).ready(function () {

    $(this).mousedown(function (e) {
        if (!$(e.target).is("#button1")) {
            $x = e.pageX;
            $y = e.pageY;

            $div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>";
            $("body").prepend($div);
        }
    });

    $(".clear").click(function () {
        $(".theDiv").remove();
    });

})

HTML

<body>
    <button id="button1" style="z-index: 2000;" class="clear">Clear</button>
</body>

I have just modified your code. Please use var keyword when declaring variables in a function.

Improve this answer
1
  • but i already have added the class to that button? will it matter?
    – Mohammad Areeb Siddiqui
    Commented Jun 8, 2013 at 11:45
2

Do it like this: http://jsfiddle.net/Qn9yL/1/

You should attach to the click even of the button rather than using onclick.

$(document).ready(function(){

    $(this).mousedown(function(e){
        $x = e.pageX;
        $y = e.pageY;

        $div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>";
        $("body").prepend($div);
    });

    $('#clear').click(function(e){
        e.preventDefault();
        $(".theDiv").remove();
    });

})

You also want to do the e.preventDefault(); to stop the event then bubbling up and creating a new div etc.

Improve this answer
1

You need to do this:-

Clear 

$(document).ready(function(){

$(this).mousedown(function(e){
    $x = e.pageX;
    $y = e.pageY;

    $div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>";
    $("body").prepend($div);
});

$(document).on("click", "button.clear", function(e){
    e.stopPropagation();
      $(".theDiv").remove();
})

})

Improve this answer
6
  • this will add the click listener to all the buttons but i want the button with the class ".clear"
    – Mohammad Areeb Siddiqui
    Commented Jun 8, 2013 at 11:45
  • ok, but if I remove the "button" there will it make a problem?
    – Mohammad Areeb Siddiqui
    Commented Jun 8, 2013 at 11:47
  • You want create and open a div when someone mousedown on document?
    – pvnarula
    Commented Jun 8, 2013 at 11:50
  • stopPropagation() means stop any other event to be executed on the document, so it will only trigger the button event not the event on document when you click the button.
    – pvnarula
    Commented Jun 8, 2013 at 12:02
  • so then how will it click the button?
    – Mohammad Areeb Siddiqui
    Commented Jun 8, 2013 at 12:03
-5

This works with successive elements:

<style media="all">
.theDiv {
    display:none;
}
</style>
Improve this answer
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.