Error adding top position

Question

Error adding top position

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

var b = document.getElementById("m");
  
function f(){
 b.style.top += "10px";
} 
setInterval(f,1000);

#m {
  
  border-radius: 360px;
  width: 150px;
  height: 150px;
  border: 2px solid black;
  position: absolute;
  top: 4px;
  
  
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<body>
  <center>
  <img src="http://i.imgur.com/5uCVACi.png" id="m"/>
  </center>
    </body>
</html>

I want that every second, lower 10px more but it's not like that and only goes down 1 time, why?

javascript

asked by Eduardo Sebastian 19.08.2017 в 04:46

source

2 answers

0

Only go down once because changing the value of the style top , you are adding the text string "10px" , instead of the numeric value 10.

To solve it, you can create a counter variable, to which 10 is added each time the function is executed. Then the variable top is assigned the variable contador plus the text "px" .

Must be changed:

var b = document.getElementById("m");

function f(){
 b.style.top += "10px";
} 
setInterval(f,1000);

by:

var b = document.getElementById("m");
var contador = 4;
function f(){
    contador += 10;
    b.style.top = contador + "px";
}
setInterval(f,1000);

Code in use:

var b = document.getElementById("m");
var contador = 4;
function f(){
    contador += 10;
    b.style.top = contador + "px";
}
setInterval(f,1000);

#m {
  
  border-radius: 360px;
  width: 150px;
  height: 150px;
  border: 2px solid black;
  position: absolute;
  top: 4px;
  
  
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<body>
  <center>
  <img src="http://i.imgur.com/5uCVACi.png" id="m"/>
  </center>
    </body>
</html>

answered by 19.08.2017 в 06:25

How to catch a url between Android Intents Why does eclipse mark me this error?

score 1 · Accepted Answer

Problems:

The first problem is that b.style.top initially equals "" (an empty string). The top you have indicated it through the rule CSS #m

Demo:

var b = document.getElementById("m");
console.log(b.style.top === '');

#m {
  border-radius: 360px;
  width: 150px;
  height: 150px;
  border: 2px solid black;
  position: absolute;
  top: 4px;
}

<img src="http://i.imgur.com/5uCVACi.png" id="m"/>

The second problem is that when doing b.style.top += "10px"; , you are not adding, but concatenating.

Demo:

var b = document.getElementById("m");
console.log('b.style.top === "" ? ', b.style.top === '');
console.log(b.style.top += '10px');
console.log(b.style.top += '10px');

console.log('Como "10px10px" no es un valor válido, es descartada la parte inválida');
console.log(b.style.top);

// Ejemplo 2
console.log('Otro ejemplo');
console.log(b.style.top = '22px');
console.log(b.style.top += '11px');
console.log(b.style.top);

#m {
  
  border-radius: 360px;
  width: 150px;
  height: 150px;
  border: 2px solid black;
  position: absolute;
  top: 4px;
}

<img src="http://i.imgur.com/5uCVACi.png" id="m"/>

Solution:

We need to get the top of m . As it is set through a class then we can use one of the following options:

Element.offsetTop

The read-only property HTMLElement.offsetTop returns the distance of the current element from the upper edge of the offsetParent node.

Example:

var b = document.getElementById("m");

function f() {
  b.style.top = (b.offsetTop + 10) + "px";
  console.log(b.style.top);
}
setInterval(f, 1000);

#m {
  border-radius: 360px;
  width: 150px;
  height: 150px;
  border: 2px solid black;
  position: absolute;
  top: 4px;
}

<center>
  <img src="http://i.imgur.com/5uCVACi.png" id="m" />
</center>

Window.getComputedStyle()

Returns the computed style of the element. The computed styles represent the final values of the CSS properties of the element.

If we use this API , we will need to obtain the numeric part in the property top . For this, the simplest way is to use parseFloat ( in this case we could use parseInt , but as top accepts decimals, parseFloat is a more general solution )

Example:

var b = document.getElementById("m");

function f() {
  var top = window.getComputedStyle(m, null).top;
  b.style.top = (parseFloat(top) + 10) + "px";
  console.log(b.style.top);
}
setInterval(f, 1000);

#m {
  border-radius: 360px;
  width: 150px;
  height: 150px;
  border: 2px solid black;
  position: absolute;
  top: 4px;
}

<center>
  <img src="http://i.imgur.com/5uCVACi.png" id="m" />
</center>