CODEWITHSUNDEEP
javascriptqueryselector
troubledcoder
troubledcoder

Reputation: 69

document.querySelectorAll doesn't apply despite the HTML adjusting

I'm trying to get all the divs within a div with document.querySelectorAll. Interestingly, when I set in the JS the height to 1000, the explorer's scroller enlarges accordingly (only the balloon doesn't get bigger). What am I doing wrong?

'use strict';

var gElBalloons;

function init() {
  gElBalloons = document.querySelectorAll('.balloons');

  setInterval(moveBalloons, 1000);
}

function moveBalloons() {
  for (var i = 0; i < gElBalloons.length; i++) {
    gElBalloons[i].style.height = 1000 + 'px';
  }
}
body {
  margin: 10%;
}

.balloon-1 {
  display: block;
  width: 120px;
  height: 145px;
  background-color: red;
  border-radius: 80%;
  position: absolute;
}

.balloon-2 {
  display: block;
  width: 120px;
  height: 145px;
  background-color: blue;
  border-radius: 80%;
  left: 40%;
  position: absolute;
}
<!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>Balloons</title>
  <link rel="stylesheet" href="./css/main.css" />
</head>

<body onload="init()">
  <div class="balloons">
    <div class="balloon-1"></div>

    <div class="balloon-2"></div>
  </div>
  <script src="./js/main.js"></script>
</body>

</html>

For now, I just want to test and make sure it works correctly.

Upvotes: 0

Views: 50

Answers (1)

WindRunnerMax
WindRunnerMax

Reputation: 109

It seems that your selector selected the wrong div. If you want to make the ball bigger, you should select balloon-1 and balloon-2 instead of their container balloons.

'use strict';

var gElBalloons;

function init() {
  gElBalloons = document.querySelectorAll('.balloons > div');

  setInterval(moveBalloons, 1000);
}

function moveBalloons() {
  for (var i = 0; i < gElBalloons.length; i++) {
    gElBalloons[i].style.height = 1000 + 'px';
  }
}
body {
  margin: 10%;
}

.balloon-1 {
  display: block;
  width: 120px;
  height: 145px;
  background-color: red;
  border-radius: 80%;
  position: absolute;
}

.balloon-2 {
  display: block;
  width: 120px;
  height: 145px;
  background-color: blue;
  border-radius: 80%;
  left: 40%;
  position: absolute;
}
<!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>Balloons</title>

</head>

<body onload="init()">
  <div class="balloons">
    <div class="balloon-1"></div>

    <div class="balloon-2"></div>
  </div>

</body>

</html>

Upvotes: 1

Related Questions