Make an element falling down to the page using html ,css, js

I want to make the grid element to fall down to the page . I used setInterval to repeat the proces (the bottom will decrease so the grid will descend ) . I think I didn’t create move() function correctly.I just want to know how can I set the function correctly .

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel= "stylesheet" href ="style.css"></link>
</head>
<body>
    <div class="grid"></div>
    <script src="javascript.js" ></script>
</body>                                                      
</html>

.grid {
    background-color:blue;
    height: 20px;
    width :100px;
    left:600px;
    top:150px;
    position : absolute;
}

var grid =document.querySelector('.grid');

function move () {
    grid.style.bottom-=4;
    grid.style.bottom=grid.bottom +'px';
}

move();
setInterval(move,30);

Answer

If you would still like to implement your approach to realize this movement, here is some feedback.

Bottom value is String, not numerical (e.g. 300px vs 300)

If you want to manipulate the bottom value of an element, you have to parse the numerical value first, then change it, and then append a ‘px’ (or whatever unit you’re using).

// grid.style.bottom-=4; // subtraction on strings is not allowed
// instead, use:
const currentBottom = parseInt(grid.style.bottom, 10)
grid.style.bottom = (currentBottom - 4) + 'px'

document.getElementById(…).style misses styles from `<style>` blocks and stylesheets

If you want to get all current styles of a DOM element, you should use window.getComputedStyle. As described in the docs:

getComputedStyle is read-only, and should be used to inspect the element’s style — including those set by a element or an external stylesheet

In the snippet below, you can see and compare the values grid.style.bottom and window.getComputedStyle(grid). At first, the first version is empty, but the second has the expected value from the stylesheet.

Alternatively, you could directly apply the style in-line with the HTML element. Then you could use .style as well for accessing the correct value from the beginning.

<div class="grid" style="bottom: 100px"></div>

Check out the fixed version of the snippet below with a delay of 3 seconds for better understanding.

var grid = document.querySelector('.grid');

function move() {
  const style = grid.style.bottom
  const computedStyle = window.getComputedStyle(grid)

  console.log('bottom', style)
  console.log('bottom from computed style', computedStyle.bottom)

  // grid.style.bottom -= 4;
  // grid.style.bottom = grid.bottom + 'px';

  const newBottom = parseInt(computedStyle.bottom, 10) - 4; // parseInt only reads the numeric value from the bottom string
  grid.style.bottom = newBottom + 'px';
}

move();
setInterval(move, 3000);

.grid {
  background-color: blue;
  height: 20px;
  width: 100px;
  left: 100px;
  bottom: 200px;
  position: absolute;
}

<div class="grid"></div>

Advertisement

Answer

Bottom value is String, not numerical (e.g. 300px vs 300)

document.getElementById(…).style misses styles from <style> blocks and stylesheets

document.getElementById(…).style misses styles from `<style>` blocks and stylesheets