How do I use the filter method to get certain elements from a JavaScript array?

Question

I am getting an error that my filter function is not a function, I tried changing my array to a string as well.Ultimately im trying to create three different arrays from the original array, the one hundred stars, named starElements.

var starElements = document.querySelectorAll("[value='basicStar']");console.log(starElements);/starElements.toString();console.log(starElements)/; starElements.filter(function (value, index, arr){return index < 33});console.log(starElements);

var xs;
var ys;
var setBasicStars;
var i;

function functionTwo() {

  setTimeout(function() {
    document.querySelector("#tailOne").setAttribute("transform-origin", "center");  document.querySelector("#tailOne").setAttribute("transform-box", "fill-box");  document.querySelector("#tailOne").setAttribute("transform", "rotate(45");  document.querySelector("#tailOne").style.transition = "transform 3s";  document.querySelector("#tailOne").style.visibility = "visible";  document.querySelector("#tailOne").setAttribute("transform", "translate(140 1800) scale(1.2)")
  }, 1000);
  setTimeout(function() {  document.querySelector("#tailTwo").setAttribute("transform-origin", "center");  document.querySelector("#tailTwo").setAttribute("transform-box", "fill-box");
    document.querySelector("#tailTwo").setAttribute("transform", "rotate(45");
    document.querySelector("#tailTwo").style.transition = "transform 3s";
    document.querySelector("#tailTwo").style.visibility = "visible";
    document.querySelector("#tailTwo").setAttribute("transform", "translate(140 1800) scale(1.2)")
  }, 2000);

  setTimeout(function() {
    document.querySelector("#tailThree").setAttribute("transform-origin", "center");
    document.querySelector("#tailThree").setAttribute("transform-box", "fill-box");
    document.querySelector("#tailThree").setAttribute("transform", "rotate(45");
    document.querySelector("#tailThree").style.transition = "transform 3s";
    document.querySelector("#tailThree").style.visibility = "visible";
    document.querySelector("#tailThree").setAttribute("transform", "translate(-400 1800) scale(1.2)")
  }, 2000);

  setTimeout(function() {
    document.querySelector("#tailFour").setAttribute("transform-origin", "center");
    document.querySelector("#tailFour").setAttribute("transform-box", "fill-box");
    document.querySelector("#tailFour").setAttribute("transform", "rotate(45");
    document.querySelector("#tailFour").style.transition = "transform 3s";
    document.querySelector("#tailFour").style.visibility = "visible";
    document.querySelector("#tailFour").setAttribute("transform", "translate(-400 1800) scale(1.2)")
  }, 3000);

  setTimeout(function() {
    document.querySelector("#tailFive").setAttribute("transform-origin", "center");
    document.querySelector("#tailFive").setAttribute("transform-box", "fill-box");
    document.querySelector("#tailFive").setAttribute("transform", "rotate(45");
    document.querySelector("#tailFive").style.transition = "transform 3s";
    document.querySelector("#tailFive").style.visibility = "visible";
    document.querySelector("#tailFive").setAttribute("transform", "translate(-400 1800) scale(1.2)")
  }, 1000);

  setTimeout(function() {
    document.querySelector("#tailSix").setAttribute("transform-origin", "center");
    document.querySelector("#tailSix").setAttribute("transform-box", "fill-box");
    document.querySelector("#tailSix").setAttribute("transform", "rotate(45");
    document.querySelector("#tailSix").style.transition = "transform 3s";
    document.querySelector("#tailSix").style.visibility = "visible";
    document.querySelector("#tailSix").setAttribute("transform", "translate(-400 1800) scale(1.2)")
  }, 3500);

  setTimeout(function() {
    document.querySelector("#tailSeven").setAttribute("transform-origin", "center");
    document.querySelector("#tailSeven").setAttribute("transform-box", "fill-box");
    document.querySelector("#tailSeven").setAttribute("transform", "rotate(45");
    document.querySelector("#tailSeven").style.transition = "transform 3s";
    document.querySelector("#tailSeven").style.visibility = "visible";
    document.querySelector("#tailSeven").setAttribute("transform", "translate(-400 1800) scale(1.2)")
  }, 1000);

  setTimeout(function() {
    document.querySelector("#tailEight").setAttribute("transform-origin", "center");
    document.querySelector("#tailEight").setAttribute("transform-box", "fill-box");
    document.querySelector("#tailEight").setAttribute("transform", "rotate(45");
    document.querySelector("#tailEight").style.transition = "transform 3s";
    document.querySelector("#tailEight").style.visibility = "visible";
    document.querySelector("#tailEight").setAttribute("transform", "translate(-40 1800) scale(1.2)")
  }, 1000);
}

function setStars() {
  document.querySelector("#button01").innerHTML = "visible warp";
  document.querySelector("#button01").setAttribute("onclick", "functionTwo()")
  setInterval(function() {
    xs = Math.floor(Math.random() * 2000);
    ys = Math.floor(Math.random() * 2000);
  }, 1000);

  var twoSpade = 100;
  var threeSpade = "helloworld";
  setBasicStars = document.createElementNS("http://www.w3.org/2000/svg", 'ellipse');
  for (i = 0; i < twoSpade; i++);
  document.querySelector("#Layer_1").appendChild(setBasicStars);
  setBasicStars.setAttribute("class", "cls-2");
  setBasicStars.style.position = "absolute";
  setBasicStars.setAttribute("rx", "12");
  setBasicStars.setAttribute("ry", "15");
  setBasicStars.setAttribute("cx", xs);
  setBasicStars.setAttribute("cy", ys);




}

var basicStarList01;
var basicStarList02;
var basicStarList03;
setTimeout(function() {
  var starElements = document.querySelectorAll("[value='basicStar']");
  console.log(starElements); /*starElements.toString();console.log(starElements)*/ ;
  starElements.filter(function(value, index, arr) {
    return index < 33
  });
  console.log(basicStarList01);

}, 12000);

(function(count) {
  if (count < 100) {
    setStars();
    var caller = arguments.callee;
    window.setTimeout(function() {
      setBasicStars.setAttribute("value", "basicStar");
      caller(count + 1);
    }, 100);
  }
})(0);

<html>

<head>
  <meta>
  </meata>
  <title>Warp 01</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <button id="button01" onclick="setStars()">Click to set stars</button>
  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1346.11 2001.68"><defs><style>.cls-1{stroke:#000;stroke-miterlimit:10;}.cls-2{fill:#fff;}</style></defs><rect id="IV" class="cls-1" x="669.52" y="997.1" width="676.09" height="1002.72"/><rect id="III" class="cls-1" x="3.22" y="998.46" width="676.09" height="1002.72"/><rect id="I" class="cls-1" x="666.8" y="0.5" width="676.09" height="1002.72"/><rect id="II" class="cls-1" x="0.5" y="1.86" width="676.09" height="1002.72"/><ellipse id="basicStar01" class="cls-2" cx="1008.56" cy="272.71" rx="9.24" ry="11.96"/><ellipse id="basicStar02" class="cls-2" cx="30.56" cy="272.71" rx="9.24" ry="11.96"/><ellipse id="basicStar03" class="cls-2" cx="300.56" cy="272.71" rx="9.24" ry="11.96"/><ellipse id="basicStar04" class="cls-2" cx="700.56" cy="500.71" rx="9.24" ry="11.96"/><g style="visibility:hidden" id="tailThree"><ellipse class="cls-2" cx="1088.33" cy="1348.3" rx="32.61" ry="40.76" transform="translate(-308.77 2373.24) rotate(-87.35)"/><path class="cls-2" d="M1118,1014.81l-9.38-40.23c-1.76-102.43-60.82,364.78-60.82,364.78-.46,9.89,14.09-20.25,24-19.8l40.27,1.86c11,11.32,13,45.29,20.52,24C1132.53,1345.44,1127.85,1015.26,1118,1014.81Z"/></g><g style="visibility:hidden" id="tailTwo"><ellipse class="cls-2" cx="1200.62" cy="630.09" rx="21.74" ry="27.17" transform="translate(563.24 1826.86) rotate(-89.65)"/><path class="cls-2" d="M1211.45,407.15l-7.33-26.55c-3.9-68.18-30.76,244.62-30.76,244.62,0,6.6,8.84-13.87,15.44-13.83l26.88.17c7.64,7.24,9.9,29.82,14.31,15.45C1230,627,1218.05,407.19,1211.45,407.15Z"/></g><g style="visibility:hidden" id="tailFour"><ellipse class="cls-2" cx="835.52" cy="1525.46" rx="32.61" ry="40.76" transform="translate(-726.88 2289.67) rotate(-87.35)"/><path class="cls-2" d="M865.15,1192l-9.38-40.23C854,1049.3,795,1516.51,795,1516.51c-.46,9.89,14.09-20.25,24-19.79l40.28,1.86c11,11.32,13,45.29,20.52,24C879.72,1522.59,875,1192.42,865.15,1192Z"/></g><g style="visibility:hidden" id="tailOne"><ellipse class="cls-2" cx="1303.24" cy="679.08" rx="27.17" ry="21.74" transform="translate(-43.14 90.14) rotate(-3.9)"/><path class="cls-2" d="M1297.53,455.94,1288.26,430c-8.94-67.71-12.57,246.23-12.57,246.23.44,6.58,7.79-14.49,14.37-14.94l26.82-1.82c8.15,6.66,12.08,29,15.41,14.34C1332.29,673.82,1304.11,455.5,1297.53,455.94Z"/></g><g style="visibility:hidden" id="tailSix"><ellipse class="cls-2" cx="301.2" cy="1367.28" rx="40.76" ry="32.61" transform="translate(-62.79 15.36) rotate(-2.65)"/><path class="cls-2" d="M271.57,1033.78,281,993.55c1.75-102.43,60.82,364.79,60.82,364.79.45,9.88-14.09-20.26-24-19.8l-40.28,1.86c-11,11.32-13,45.29-20.51,24C257,1364.41,261.68,1034.24,271.57,1033.78Z"/></g><g style="visibility:hidden" id="tailSeven"><ellipse class="cls-2" cx="188.9" cy="649.07" rx="27.17" ry="21.74" transform="translate(-3.94 1.16) rotate(-0.35)"/><path class="cls-2" d="M178.08,426.13l7.32-26.55c3.91-68.18,30.77,244.62,30.77,244.62,0,6.6-8.85-13.87-15.45-13.83l-26.88.17c-7.63,7.24-9.9,29.82-14.3,15.44C159.54,646,171.48,426.17,178.08,426.13Z"/></g><g style="visibility:hidden" id="tailFive"><ellipse class="cls-2" cx="554.01" cy="1544.43" rx="40.76" ry="32.61" transform="translate(-70.7 27.22) rotate(-2.65)"/><path class="cls-2" d="M524.38,1210.94l9.38-40.23c1.75-102.43,60.82,364.78,60.82,364.78.46,9.89-14.09-20.25-24-19.79l-40.28,1.86c-11,11.32-13,45.29-20.51,24C509.81,1541.57,514.49,1211.4,524.38,1210.94Z"/></g><g style="visibility:hidden" id="tailEight"><ellipse class="cls-2" cx="86.29" cy="698.05" rx="21.74" ry="27.17" transform="translate(-616.02 736.7) rotate(-86.1)"/><path class="cls-2" d="M92,474.92,101.26,449c8.95-67.71,12.58,246.22,12.58,246.22-.45,6.59-7.79-14.48-14.38-14.93l-26.82-1.83c-8.15,6.67-12.08,29-15.41,14.35C57.23,692.8,85.41,474.47,92,474.92Z"/></g></svg>


  <script>
  </script>





</body>

</html>

If you just want to filter based on index, you can use slice: starElements.slice(0, 33) — Barmar
– Barmar, Commented Dec 10, 2020 at 19:53

user14018874 · Accepted Answer · 2020-12-10 19:53:13Z

1

.querySelectorAll returns an HTMLCollection, which is not an array :(

You can use Array.from to turn it into an array:

const elements = document.querySelectorAll("something");
const elementArray = Array.from(elements);

// elementArray is now an array of elements :)

answered Dec 10, 2020 at 19:53

user14018874

Sign up to request clarification or add additional context in comments.

3 Comments

user14185779 Over a year ago

That worked out, didn't know it was an HTML collection. Thank you

user14185779 Over a year ago

id like to know how to change the style on the 33, id like to scale them by 2. Im getting the error cannot change style of undefined.

user14185779 Over a year ago

Nevermind I used stackoverflow.com/questions/39690321/…

Collectives™ on Stack Overflow

How do I use the filter method to get certain elements from a JavaScript array?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related