CODEWITHSUNDEEP
javascript
AndrewLeonardi
AndrewLeonardi

Reputation: 3512

Set new object location on button click?

I'm trying to figure out change an object's location on the screen when someone clicks a button. For example image 1 should move to {'x' : '300' , 'y' : '200'}, when a button is clicked.

Any suggestions? Thanks!

Upvotes: 0

Views: 53

Answers (2)

Kenneth Huang
Kenneth Huang

Reputation: 23

$(".btn").on ("click", function() {
    $(".image1").css({top: 300px, left: 200px});
});

this should do the trick

Upvotes: 0

Dmitriy Khudorozhkov
Dmitriy Khudorozhkov

Reputation: 1623

Given you have the following in your HTML layout:

<button id="button1">Click</button>
<img src="..." id="image1" />

you can do something like this in a script file (pure JavaScript):

var button1 = document.getElementById("button1");
var image1 = document.getElementById("image1");

button1.click = function()
{
    image1.style.position = "absolute";
    image1.style.top = "300px";
    image1.style.left = "200px";
};

or with jQuery/Zepto.js:

$(function()
{
    $("#button1").on("click", function()
    {
        $("#image1").css({position: "absolute", top: "300px", left: "200px"});
    });
});

Upvotes: 3

Related Questions