Тестовое задание по Js, почему выдает ошибку?

Question

[Юрий]

В общем получил я тестовое задание от одной компании, у них на сайте нужно написать скрипт заставляющий элемент id="io" двигаться по орбите вокруг элемента id="jupiter". Как написал интервьюер "Прошу выполнить небольшой тест", в итоге за день я почти никуда не продвинулся. Я написал тестовый скрипт чтоб просто заставить лететь Io вокруг себя же.

function animation(elem,speed,delay,distance) {
        	var x = 0;
        	var s = speed * Math.PI / 180;
        	setInterval(function() {
                    x += s;
                    elem.style.left = distance * Math.sin(x) + "px";
                    elem.style.top = distance * Math.cos(x) + "px";
                  }, delay);
        }

На локалке все работало, заливаю к ним - получаю еррор: Cannot set property 'left' of undefined at eval.
Затем попробовал подвигать jupiter - все работает. Точно также и со вторым скриптом который мне уже помогли написать:

Number.prototype.toRadian = function() {
          return this * Math.PI / 180;
        };
        var animations = [];
         handler();

        function addAnimate(appendTo,el,speed,radius,angle){
            angle = angle || Math.random()*360;
            animations.push({
            ap:appendTo,
            el:el,
            speed:speed,
            angle:0,
            radius:radius
          });
        }
        function handler() {
                animations.map(function (el) {
                    var xCenter = el.ap.offsetLeft + el.ap.offsetWidth / 2;
                    var yCenter = el.ap.offsetTop + el.ap.offsetHeight / 2;
                    var w = el.el.offsetWidth;
                    var h = el.el.offsetHeight;
                    var x = xCenter - w / 2 + el.radius * Math.sin(el.angle.toRadian());
                    var y = yCenter - h / 2 + el.radius * Math.cos(el.angle.toRadian());
                    el.angle = (el.angle + el.speed) % 360;
                    el.el.style.left = x + 'px';
                    el.el.style.top = y + "px";
                });
                requestAnimationFrame(handler);
            }

Ситуация идентична... В виду того что я слабо знаком с JS, а JQuery там не используется, можно как то по другому двигать эти элементы? Ошибка всегда идет при попытке сдвига элемента через elem.style.left and elem.style.top В гугле однозначного ответа на этот вопрос я не нашел. Не знаю правильно это или нет, но все же добавлю ссылку на их задание: https://onthe.io/dev

Comments

[sim3x]

Покажите им на https://jsfiddle.net/

[Андрей]

Сделайте на CSS https://codepen.io/nazarelen/pen/aNQNva
Ну и на JS что-нибудь запилите для разнообразия, типа console.log('YES!'), раз по задаче требуется :)

[Юрий]

Андрей: Нужно именно у них... Я бы подумал что проблема у них на сайте но после первой попытки сдвинуть io, я задал подобный вопрос в группе вк. Одному человеку удалось его сдвинуть, но как именно он не сказал.

[Kovalsky]

Юрий: "Нужно именно у них" - вот это никак не мешает пример отладить сначала на jsfiddle.net

[Юрий]

Никита Полевой: Вы опять же меня не поняли... Код не работает именно У НИХ на сайте! вот вам раз: https://codepen.io/MoonMay/pen/gREqyo вот вам 2: https://jsfiddle.net/MoonMay/ar9xf6hx/

Answer 1

[Kovalsky]

Вроде всё работает

Вероятно это не ваш код и вы не знаете как он работает, т.к. мне на адаптацию кода понадобилось несколько секунд.

Comments

[Юрий]

думаю ответ очевиден: "В виду того что я слабо знаком с JS"; Но спасибо за помощь :)

[Kovalsky]

Юрий: в некотором смысле JS тут ни при чем - вы написали код, следовательно вы его для начала придумали, то есть разработали алгоритм по которому всё работает. А если алгоритм разработали и правда вы, то вы знаете как он работает.

Я даже не знаю как я смогу помочь. Вы пишете что у вас ошибка "Cannot set property 'left' of undefined at eval.", ну так посмотрите в код, посмотрите у какого объекта вы пытаетесь взять свойство left , этот объект у вас почему-то равен undefined. У меня такой ошибки нет, поэтому я никак не смогу вам помочь.

[Юрий]

Никита Полевой: Я передавал в функцию сам id элемента, а на элементе уже вызывал .style.left итд. Тогда почему этот способ работает повсюду кроме ихнего тест задания? Я же выкладывал вам на https://codepen.io/MoonMay/pen/gREqyo что никаких ошибок нет! как и на локалке.

[Kovalsky]

Юрий:

Я передавал в функцию сам id элемента

Вызываете вы функцию так:

animation( moon, 3, 20, 40 );

А принимает она у вас такие аргументы:

function animation( elem, speed, delay, distance ) {}

Видите, написано elem? Ваша функция принимает не ID, а ссылку на элемент.

И кстати, какой код вы выполняете у них на тестовой странице?

[Юрий]

Никита Полевой: Тогда почему когда я на локалке запускаю с переданным ID а не ссылкой - проблемы нет. Все пихал туда, и одна и так же ошибка.

[Kovalsky]

Юрий: ну покажите. Во всех продемонстрированных вами примерах вы передаёте именно ссылку на объект, а не ID. Поэтому я и спрашиваю какой код вы выполняете на тестовой странице.

[Юрий]

Никита Полевой:

Такой код на локалке работает:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body style="background: black;">

        <img style="width: 60px; height: 60px; margin-top: 100px; margin-left: 600px; position: absolute;" src="moon.png" id="moon">
        <img style="width: 60px; height: 60px; margin-top: 300px; margin-left: 600px; position: absolute;" src="moon.png" id="moon2">


        <script>   
            animation(moon2,2,20);
            function animation(elem,speed,delay) {
    
             var range = 150;

                 var x = 0;
                 var s = speed * Math.PI / 180;
                    setInterval(function() {
                    x += s;
                    elem.style.left = range * Math.sin(x) + 'px';
                    elem.style.top = range * Math.cos(x) + 'px';
                     }, delay);
            }
        </script>
    </body>
</html>

[Kovalsky]

Юрий: ага, и опять вы передаёте ссылку на объект. Как и в других примерах.

А код который вы выполняете на onthe.io/dev вы никогда не покажете?

[Dark Hole]

Никита Полевой: там вообще, походу, надо анимировать с помощью стандартных средств(_io.move), но они багнутые.

[Юрий]

Никита Полевой: Это он и есть.

[Kovalsky]

Юрий: если это он и есть (animation(moon2,2,20);), то разгадка в том, что у них на страничке нету элемента moon2.

[Юрий]

Никита Полевой: ты не шутишь? КОД ЧТО Я КОРМИЛ ИХ РЕДАКТОРУ ИДЕНТИЧЕН ТОМУ ЧТО Я СКИНУЛ ТЕБЕ. Ясно что заменяю значение id элемента.

[Kovalsky]

Юрий: вы помощи просите или что? Если помощи просите, то скидывайте пожалуйста код имеющий отношение к проблеме, а именно тот код который вы используете, без изменений. Не важно что вам кажется ясным, важно что у вас в коде ошибка и мы её не увидим пока вы не покажете код. Вроде логично.

Если изменяете ID, то код уже становится не идентичен. Если не показываете код, то никакой речи о помощи не может идти. Кофейная гуща.

[Юрий]

Никита Полевой: Понятно. Я коримил точно то же самое что кидал но с изменением с moon на io. В итоге заработало так:

document.getElementById("jupiter").style.transform = "none";
document.getElementById("jupiter").style.margin = "-45 0 0 -50";

        Number.prototype.toRadian = function() {
          return this * Math.PI / 180;
        };
        var animations = [];
         handler();

        function addAnimate(appendTo,element,speed,radius){
            animations.push({
            ap:appendTo,
            el:element,
            speed:speed,
            angle:0,
            radius:radius
          });
        }
        function handler() {
                animations.map(function (element) {
                    var xCenter = element.ap.offsetLeft + element.ap.offsetWidth / 2;
                    var yCenter = element.ap.offsetTop + element.ap.offsetHeight / 2;
                    var w = element.el.offsetWidth;
                    var h = element.el.offsetHeight;
                    var x = xCenter - w / 2 + element.radius * Math.sin(element.angle.toRadian());
                    var y = yCenter - h / 2 + element.radius * Math.cos(element.angle.toRadian());
                    element.angle = (element.angle + element.speed) % 360;
                    element.el.style.left = x + 'px';
                    element.el.style.top = y + "px";
                });
                requestAnimationFrame(handler);
            }
              
var jupiter = document.getElementById("jupiter");
var io = document.getElementById("io");
addAnimate(jupiter, io, 1, 140);