how is it when I use querySelectorAll, that I am getting undefined?

    var initialCircle;
    var i;
    var randomXPos;
    var randomYPos;
    var colorArray;
    var interval01;
    var circleNodeList;
    colorArray=[
        'aliceblue','lavender','powderblue','lightblue','lightskyblue','skyblue','deepskyblue','lightsteelblue',    'dodgerblue','cornflowerblue','steelblue','cadetblue','mediumslateblue','slateblue','darkslateblue','royalblue','blue','mediumblue','darkblue','navy','midnightblue','blueviolet',  'indigo'];
    var randomColor;




    function startBouncingHoverCircles(){interval01 = setInterval(function(){randomXPos = Math.floor(Math.random() * 450) + 1;randomYPos = Math.floor(Math.random() * 300) + 1;randomColor=colorArray[Math.floor(Math.random() * colorArray.length)];initialCircle = document.createElement('div');document.querySelector("#container").appendChild(initialCircle);initialCircle.className="aces";initialCircle.style='height:30px;width:30px;border-;box-sizing:border-box;position:absolute;border:3px solid green;background-color:'+randomColor;initialCircle.style.top=randomYPos+'px';initialCircle.style.left=randomXPos+'px';},1);setTimeout(function(){clearInterval(interval01);colorChange()},200)}
    
function colorChange(){circleNodeList = document.querySelectorAll(".circles");console.log(circleNodeList.length);for (let i = 0; i < circleNodeList.length; i++) {
  circleNodeList[i].style.backgroundColor='red';
}}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.6.1/randomColor.min.js" integrity="sha512-vPeZ7JCboHcfpqSx5ZD+/jpEhS4JpXxfz9orSvAPPj0EKUVShU2tgy7XkU+oujBJKnWmu4hU7r9MMQNWPfXsYw==" crossorigin="anonymous"></script>
    <style>#container {
  width: 450px;
  height: 300px;
  position: relative;
  border: 1px solid black;
  margin: auto;
}</style>
</head>

<body>
    <button onClick="startBouncingHoverCircles()">Start</button>
<div id="container"></div>
    
    <script src="../Js/bouncingHoverCircles.js"></script>
</body>
</html>
var initialCircle;
var i;
var randomXPos;
var randomYPos;
var colorArray;
colorArray = [
  'aliceblue', 'lavender', 'powderblue', 'lightblue', 'lightskyblue', 'skyblue', 'deepskyblue', 'lightsteelblue', 'dodgerblue', 'cornflowerblue', 'steelblue', 'cadetblue', 'mediumslateblue', 'slateblue', 'darkslateblue', 'royalblue', 'blue', 'mediumblue', 'darkblue', 'navy', 'midnightblue', 'blueviolet', 'indigo'
];
var randomColor;

function startBouncingHoverCircles() {
  for (i = 0; i < 5; i++) {
    randomXPos = Math.floor(Math.random() * 1200) + 200;
    randomYPos = Math.floor(Math.random() * 1200) + 200;
    randomColor = colorArray[Math.floor(Math.random() * colorArray.length)];
    initialCircle = document.createElement('div');
    document.body.appendChild(initialCircle);
    initialCircle.className = "circles";
    initialCircle.style = 'height:100px;width:100px;border-radius:50%;box-sizing:border-box;position:absolute;border:3px solid green;background-color:' + randomColor;
    initialCircle.style.top = randomYPos + 'px';
    initialCircle.style.left = randomXPos + 'px';
    setTimeout(function() {
      document.getElementsByClassName("circles").style.transition = "transform 1s";
      document.getElementsByClassName("circles").style.transform = "translate(5px, 5px)"
    }, 500)
  }
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.6.1/randomColor.min.js" integrity="sha512-vPeZ7JCboHcfpqSx5ZD+/jpEhS4JpXxfz9orSvAPPj0EKUVShU2tgy7XkU+oujBJKnWmu4hU7r9MMQNWPfXsYw==" crossorigin="anonymous"></script>
</head>

<body>
  <button onClick="startBouncingHoverCircles()">Start</button>
  <script src="../Js/bouncingHoverCircles.js"></script>
</body>

</html>

Wondering why I get undefined or script error when trying to access the circles by class names that they all have. when I try to get them with either getElementByClassName or querySelectorAll im getting an undefined. I have tried changing them back to squares thinking that the browser was not recognizing them, but that did not work. I tried getting the container and then get div elements within it using

document.querySelector("#container").getElementsByTagName(‘div’).style

, but that didn’t work either. Is this a browser issue? I asked the original question After creating div elements, how is it that they may be undefined when trying to manipulate them in the Dom? and some of the people there said it was running fine, but this is not true on my end.
This is the edited version, and I did not know that querySelectorAll returns a nodeList. So I tried to run a for loop. I didn’t get any errors, but I didn’t get the boxes to turn red.

130 thoughts on “how is it when I use querySelectorAll, that I am getting undefined?”

  1. 38862 160759There couple of fascinating points at some point in this posting but I dont determine if these individuals center to heart. There is some validity but Let me take hold opinion until I check into it further. Great write-up , thanks and then we want far more! Combined with FeedBurner in addition 61690

    Reply
  2. 583626 867524 An intriguing discussion is worth comment. I think that you really should write far more on this topic, it may not be a taboo subject but usually individuals are not enough to speak on such topics. To the next. Cheers 327077

    Reply

Leave a Comment