CODEWITHSUNDEEP
javascripthtmlcssdom
aidz927
aidz927

Reputation: 35

How can I permanently change the style of my object?

#one
{
    position: absolute;
    top: 325px;
}

Given the css codes above I would like to move my image downwards. I want it to move 4px everytime I click a button.

function lol(){
    document.getElementById("one").style.top = 100px;
}

and the usual:

<button onClick="lol">

What it does is move the image above, and when i change 100px to another value it just moves it there. I want the outcome position to be permanent and when I click a button, it moves that specific px downward if negative, upward if positive, and clicking it again makes it move as follows, with respect to its 2nd position, not the original. Is there a possible way that I can use without using other methods like jQuery which I am not familiar with. Thanks in advance.

Upvotes: 1

Views: 270

Answers (3)

T.J. Crowder
T.J. Crowder

Reputation: 1074485

First, you're missing the () on your call:

<button onClick="lol()">

(onClick is also onclick in the spec [lower-case c], but browsers allow onClick as well.)

Then, in the function, get the current value, convert it to a number (ignoring the px at the end), and assign the result back:

function lol(){
    var oneStyle = document.getElementById("one").style;
    var top = parseInt(oneStyle.top, 10);
    oneStyle.top = (top + 100) + "px";
}

parseInt will parse the number at the beginning of the string, and stop when it reaches the px.

Live Example:

function lol() {
  var oneStyle = document.getElementById("one").style;
  var top = parseInt(oneStyle.top, 10);
  oneStyle.top = (top + 100) + "px";
}
<button onClick="lol()">Click me</button>
<div id="one" style="position: absolute; top: 40px; left: 10px">I'm one</div>

Note, though, that that assumes you've used an inline style for top in the first place, not (for instance) a value from a stylesheet or just the natural position of the element.

To use a stylesheet value or the natural position of the element, you need getComputedStyle (or currentStyle on old IE):

function lol(){
    var one = document.getElementById("one");
    var style = window.getComputedStyle ? window.getComputedStyle(one) : one.currentStyle;
    var top = parseInt(style.top, 10);
    one.style.top = (top + 100) + "px";
}

Live Example:

function lol(){
    var one = document.getElementById("one");
    var style = window.getComputedStyle ? window.getComputedStyle(one) : one.currentStyle;
    var top = parseInt(style.top, 10);
    one.style.top = (top + 100) + "px";
}
#one {
  position: absolute;
  top: 40px;
  left: 10px;
}
<button onClick="lol()">Click me</button>
<div id="one">I'm one</div>

Upvotes: 4

mooiamaduck
mooiamaduck

Reputation: 2156

As mentioned before, get the current offset of the button and add 4px to it. However there are number of small issues to be aware of. See this working example:

var delta = 4;

document.addEventListener('DOMContentLoaded', function() {
  var button = document.getElementById('my-button');
  button.addEventListener('click', function() {
    var offset = parseInt(button.style.top) || 0;
    button.style.top = (offset + delta) + 'px';
  });
});
#my-button {
  position: absolute;
  top: 0;
}
<button id="my-button">Button</button>

Upvotes: 0

Manu Masson
Manu Masson

Reputation: 1737

You need to use the += operator.

function lol(){
   var x = document.getElementById("one").style.top
   x = (x+100)+'px'
}

Upvotes: -2

Related Questions