как передать данные в функцию из списка объектов?

Question

Никак не выходит передать данные в функцию из списка объектов, простите за такой вопрос и спасибо заранее!

 'use strict';
    let arrA = [
      {id:1, name:document.querySelector.css, radius: 250, speed: 20},
      {id:2, name:document.querySelector.flag, radius: 300, speed: 10}
      ];
 
    function animation(arrA) { 
      for(let getArr of arrA) { 
        for(let i = 0; i < getArr.length; i++){
        let name = getArr.name[i];
        let radius = getArr.radius[i];
        let speed = getArr.speed[i];
        let f = 0;
        let s = 2 * Math.PI / 180; //Вычислим угол
        setInterval(function() { // функция движения 
        f += s; // приращение аргумента
        name.style.left = 235 + radius * Math.sin(f) + 'px'; // меняем координаты элемента, подобно тому как мы это делали в школе в декартовой системе координат. Правда, в данном случае используется полярная система координат, изменяя угол
        name.style.top = 235 + radius * Math.cos(f) + 'px';
  }, speed);
}
} }
animation();

body {
    background:#000000;
}
.css {
    position: absolute;
    background:#6495c4;
    width:30px;
    height:30px;
    left: 70px;
    top: 40px;
    border: 3px solid #fff;
    cursor: pointer;
        border-radius: 19px;
       -webkit-border-radius: 19px;
       -moz-border-radius: 19px;

}
.flag {
    position: absolute;
    background:#6495c4;
    width:30px;
    height:30px;
    left: 70px;
    top: 40px;
    border: 3px solid #fff;
    cursor: pointer;
        border-radius: 19px;
       -webkit-border-radius: 19px;
       -moz-border-radius: 19px;

}
#round {
    position: absolute; 
    left: 50%;
    margin-left: -250px; 
    top: 100px; 
    width: 500px; 
    height: 500px;
    border: 5px solid #6495c4;
        border-radius: 250px;
       -webkit-border-radius: 250px;
       -moz-border-radius: 250px;
    
}
#road {
    position: absolute; 
    left: 50%;
    margin-left: -250px; 
    top: 100px; 
    width: 500px; 
    height: 500px;
    border: 5px solid #6495c4;
        border-radius: 250px;
       -webkit-border-radius: 250px;
       -moz-border-radius: 250px;
    
}

<div id="round">
       <div class="css"></div> 
    </div>
       <div id="road">
       <div class="flag"></div> 
    </div>

Говорит что Идентификатор arrA уже объявлен

Answer 1

У вас не многомерный массив, а список объектов попробуйте как то так его перебрать

function animation(arrA) { 
    for(let i = 0; i < arrA.length; i++){
    let name = arrA[i].name;
    ...

Answer 2

'use strict';
let arrA = [
  { id: 1, name: '.css', radius: 250, speed: 20 },
  { id: 2, name: '.flag', radius: 300, speed: 10 }
];

function animation(arr) {
  for (let getArr of arr) {
      let name = document.querySelector(getArr.name);
      let radius = getArr.radius;
      let speed = getArr.speed;
      let f = 0;
      let s = 2 * Math.PI / 180; //Вычислим угол
      setInterval(function() { // функция движения 
        f += s; // приращение аргумента
        name.style.left = 235 + radius * Math.sin(f) + 'px'; // меняем координаты элемента, подобно тому как мы это делали в школе в декартовой системе координат. Правда, в данном случае используется полярная система координат, изменяя угол
        name.style.top = 235 + radius * Math.cos(f) + 'px';
      }, speed);
  }
}
animation(arrA);

body {
  background: #000000;
}

.css {
  position: absolute;
  background: #6495c4;
  width: 30px;
  height: 30px;
  left: 70px;
  top: 40px;
  border: 3px solid #fff;
  cursor: pointer;
  border-radius: 19px;
  -webkit-border-radius: 19px;
  -moz-border-radius: 19px;
}

.flag {
  position: absolute;
  background: #6495c4;
  width: 30px;
  height: 30px;
  left: 70px;
  top: 40px;
  border: 3px solid #fff;
  cursor: pointer;
  border-radius: 19px;
  -webkit-border-radius: 19px;
  -moz-border-radius: 19px;
}

#round {
  position: absolute;
  left: 50%;
  margin-left: -250px;
  top: 100px;
  width: 500px;
  height: 500px;
  border: 5px solid #6495c4;
  border-radius: 250px;
  -webkit-border-radius: 250px;
  -moz-border-radius: 250px;
}

#road {
  position: absolute;
  left: 50%;
  margin-left: -250px;
  top: 100px;
  width: 500px;
  height: 500px;
  border: 5px solid #6495c4;
  border-radius: 250px;
  -webkit-border-radius: 250px;
  -moz-border-radius: 250px;
}

<div id="round">
  <div class="css"></div>
</div>
<div id="road">
  <div class="flag"></div>
</div>

БЛОГ НА HUSL

как передать данные в функцию из списка объектов?

Ответы (2 шт):