CODEWITHSUNDEEP
javascript
Bawer
Bawer

Reputation: 109

How to move a div 10 pixels to right once every second?

So I'm trying to make a prototype for a little project I'm trying to work on, were a div moves 10 pixels to right every second. I've tried to look up how to do similar things like I want to do, but I can't make it work. I want to make it with JavaScript, but when JavaScript is executed, the squareStyleTop value just add "100px", so it just increases and after a few seconds the value looks like this: The console log

This is what I've been able to do so far:

//setTimeout(function(){ alert("Hello"); }, 3000);
var squareStyle = document.getElementById("sjuku").style;
var squareStyleTop = squareStyle.top

function TingLing() {
  squareStyleTop += "10px";
  console.log("squareStylTop is ", squareStyleTop)
}

setInterval(TingLing, 1000);
#denneYes {
    position: absolute;
    left: 1300px;
}

#sjuku {
  height: 2em;
  width: 2em;
  background-color: #00ffff;
  position: absolute;
}
<a href="C:\Users\05bawmud\Documents\Mappe for organisering\Nettside2\Index\index.html" id="denneYes">Go bak</a>
<div id="sjuku"></div>

Upvotes: 1

Views: 2055

Answers (3)

Krutik Raut
Krutik Raut

Reputation: 139

let squareStyleTop = 10;
function TingLing (){
    squareStyleTop += 10;
    document.getElementById("sjuku").style.top = squareStyleTop + "px";
    console.log("squareStylTop is ", squareStyleTop)
}
setInterval(TingLing, 1000);
 
#denneYes { position: absolute;
    left: 1300px;
}

#sjuku {
    height: 2em;
    width: 2em;
    background-color: #00ffff;
    position: absolute;
}
<html>
<head>
    <title>Indax</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <a href="C:\Users\05bawmud\Documents\Mappe for organisering\Nettside2\Index\index.html" id="denneYes">Go bak</a>
    <div id="sjuku"></div>
    <script src="main.js"></script>
</body>
</html>

Upvotes: 1

Behemoth
Behemoth

Reputation: 9310

Make sure to set an initial top value in your html file. This would be my approach of doing it.

const square = document.getElementById("sjuku");
const increment = 10;


setInterval(() => {
  square.style.top = parseInt(square.style.top, 10) + increment + "px";
  console.log("squareStylTop is", square.style.top);
}, 1000);
#denneYes {
  position: absolute;
  left: 1300px;
}

#sjuku {
  height: 2em;
  width: 2em;
  background-color: #00ffff;
  position: absolute;
}
<html>
  <head>
    <title>Indax</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <a
      href="C:\Users\05bawmud\Documents\Mappe for organisering\Nettside2\Index\index.html"
      id="denneYes"
      >Go bak</a
    >
    <div id="sjuku" style="top: 0"></div>
    <script src="main.js"></script>
  </body>
</html>

Upvotes: 0

labeeb
labeeb

Reputation: 46

Try changing following:

function TingLing (){
    squareStyleTop += "10px";
    console.log("squareStylTop is ", squareStyleTop)
}

to

function TingLing (){
    squareStyleTop = ( parseInt( squareStyleTop == null ? 0 : squareStyleTop ) + 10 ) + 'px';
    console.log("squareStylTop is ", squareStyleTop)
}

Essentially I am converting '10px' to 10 so I can add 10 to it and afterwards I am concatenating it 'px'

Upvotes: 1

Related Questions