Trying to select all the div elements within another div using document.querySelectorAll. Interestingly, when setting the height to 1000 in the JS, the browser's scrollbar adjusts accordingly (the balloons do not change size). What could I be doing incorrectly?
'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>Just in the testing phase to ensure everything functions properly.