Не удается прочитать свойство «стиль» неопределенного onmousemove

Итак, на моем веб-сайте я хочу, чтобы какой-то текст следовал за моим курсором. Я использую следующий JS:

var balls = document.getElementsByClassName("text1");
  document.onmousemove = function(){
    var x = event.clientX * 100 / window.innerWidth + "%";
    var y = event.clientY * 100 / window.innerHeight + "%";

    for(var i=0;i<2;i++){
      balls[i].style.left = x;
      balls[i].style.top = y;
      balls[i].style.transform = "translate(-"+x+",-"+y+")";
    }
  };

но в хроме я получаю следующее сообщение об ошибке:

Uncaught TypeError: не удается прочитать стиль свойства undefined в HTMLDocument.document.onmousemove (script.js:7) document.onmousemove @ script.js:7

Может кто-нибудь помочь мне?


javascript html undefined cursor onmousemove
person Garb o' Donk    schedule 14.05.2021    source источник
comment
Ну, видимо balls[0] (или balls[1]) не определено. У меня нет контекста, чтобы увидеть, что такое document.getElementsByClassName("text1");, но он не возвращает массив, как вы ожидаете.   -  person C. Peck    schedule 14.05.2021

Ответы (1)


arrow_upward
1
arrow_downward

Проблема в вашем коде заключается в том, что вы зацикливаетесь до i==2, но вы могли прикрепить класс text1 только к 1 элементу, и поэтому, когда цикл достиг balls[1], он выдал ошибку Cannot read property 'стиль' неопределенного.

Поэтому либо уменьшите максимальное значение цикла, либо присоедините класс text1 к большему количеству элементов.

Вот рабочий пример.

<!DOCTYPE html>
<html>
<script>
  var balls = document.getElementsByClassName("text1");
  document.onmousemove = function() {
    var x = event.clientX * 100 / window.innerWidth + "%";
    var y = event.clientY * 100 / window.innerHeight + "%";
    for (var i = 0; i < 2; i++) {
      balls[i].style.left = x;
      balls[i].style.top = y;
      balls[i].style.transform = "translate(-" + x + ",-" + y + ")";
    }
  };
</script>

<body>
  <p class="text1">Hello</p>
  <p class="text1">World</p>
</body>

</html>

person Shubham    schedule 14.05.2021
comment
Хороший ответ! Не могли бы вы добавить опцию для запуска фрагмента? - person axtck; 14.05.2021
comment
Спасибо! Теперь это работает хорошо - person Garb o' Donk; 14.05.2021