Почему не работает функция?

@Дима_Кирсанов · Регистрация: 08.10.2010

Студворк — интернет-сервис помощи студентам

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
Почему не работает функция?
 
function CircleMove()
{
  document.getElementById("crazycircle").onmouseover = function(event)
  {
    this.style.marginTop = parseInt(this.style.marginTop)+5+"px";
  } 
}
 
 
window.onload = CircleMove();

@kalabuni · 09.06.2015, 12:04

* пара круглых скобок в строке #12 не нужна
* event в строке #5 не нужен
* строка #7 корректно сработает только в том случае, если значение для свойства margin-top тега прописано внутри этого тега в атрибуте style (если же это значение указано в блоке <style></style> или во внешнем css-файле, то parseInt получит недопустимое значение)

@Дима_Кирсанов · 09.06.2015, 12:04 **[ТС]**

Изменил код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function Init()
{
  document.getElementById("crazycircle").onmouseover = function CircleMove(element)
  {
    alert(parseInt(this.style.marginTop)); 
    //this.style.marginTop = parseInt(this.style.marginTop)+5+"px";
  } 
}
 
 
window.onload = Init();

Но почему-то alert(parseInt(this.style.marginTop)); возвращает NaN

@kalabuni · 09.06.2015, 12:11

читать не умеете?
выше мною написано три замечания -- вы при изменении кода ни одного не учли

@Дима_Кирсанов · 09.06.2015, 12:16 **[ТС]**

kalabuni, по последнему пункту из вашего сообщения.
Это все есть, было и будет:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CrazyCircle</title>
    <link href="circlecss/crazycircle.css" rel="stylesheet">
  </head>
  <body>
    <div class="crazycircle" id="crazycircle"></div>
    <script src = "/js/CrazyCircle.js"></script>
  </body>
</html>

HTML5
1
2
3
4
5
6
7
8
.crazycircle
{
  margin-top: 300px;    
  margin-left: 450px;
  width: 60px;
  height: 60px;
  background: url(../circleimg/sadsmileface.jpeg);
}

Добавлено через 4 минуты
kalabuni, ну и что, всё равно NaN

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
function Init()
{
  //document.getElementById("crazycircle").onmouseover = function CircleMove(element)
  document.getElementById("crazycircle").onmouseover = function()
  {
    //this.style.marginTop = 100 + "px";
    alert(parseInt(this.style.marginTop)); 
    //this.style.marginTop = parseInt(this.style.marginTop)+5+"px";
  } 
}
 
window.onload = Init;
//window.onload = Init();

@Shakalaka · 09.06.2015, 12:20

Дима_Кирсанов,
this.style.marginTop вернет значение ТОЛЬКО если этот margin задан в инлайновом стиле. Вывод:
1) Читаем про инлайновые стили.
2) Смотрим на свой код
3) Смотрим пост kalabuni

@Дима_Кирсанов · 09.06.2015, 13:04 **[ТС]**

Shakalaka, как мне вернуть числовое значение margin в этом случае, какую функцию использовать?

@Shakalaka · 09.06.2015, 13:12

JavaScript
1
getComputedStyle(this).marginTop

@Дима_Кирсанов · 09.06.2015, 13:47 **[ТС]**

Ок, это всё я понял

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
function Init()
{
  document.getElementById("crazycircle").onmouseover = function()
  {
    var computedStyle = getComputedStyle(document.getElementById("crazycircle"));
    if ((parseInt(computedStyle.marginTop) > -10) && (parseInt(computedStyle.marginTop) < 620) && (parseInt(computedStyle.marginLeft) > -10) && (parseInt(computedStyle.marginLeft) < 960))
    {   
      this.style.marginTop = parseInt(computedStyle.marginTop)-5+"px";
    }
  } 
}
 
window.onload = Init;

Добавлено через 3 минуты
А как реализовать вот такое: при наведении курсора мыши элемент отодвигается в обратную сторону относительно направления движения курсора. Какую функцию нужно применить, чтобы узнать с какой стороны к элементу подведен курсор?

@Игор35 · 09.06.2015, 14:22

Сообщение от Дима_Кирсанов

А как реализовать вот такое: при наведении курсора мыши элемент отодвигается в обратную сторону относительно направления движения курсора.

Попробуй перевести в противоположное значение (если число положительное, то в отрицательное и т.д.)

Сообщение от Дима_Кирсанов

Какую функцию нужно применить, чтобы узнать с какой стороны к элементу подведен курсор?

pageY и pageX

@Дима_Кирсанов · 09.06.2015, 14:42 **[ТС]**

Игор35, pageY и pageX - а разве X и Y не могут быть равны? Что предлагаете делать тогда?

@Игор35 · 09.06.2015, 16:17

Если я все правильно понял, то вот http://codepen.io/anon/pen/NqjmGN

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	09.06.2015, 12:04
	* пара круглых скобок в строке #12 не нужна * event в строке #5 не нужен * строка #7 корректно сработает только в том случае, если значение для свойства margin-top тега прописано внутри этого тега в атрибуте style (если же это значение указано в блоке <style></style> или во внешнем css-файле, то parseInt получит недопустимое значение) 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	09.06.2015, 12:11
	читать не умеете? выше мною написано три замечания -- вы при изменении кода ни одного не учли 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	09.06.2015, 12:20
	Дима_Кирсанов, this.style.marginTop вернет значение ТОЛЬКО если этот margin задан в инлайновом стиле. Вывод: 1) Читаем про инлайновые стили. 2) Смотрим на свой код 3) Смотрим пост kalabuni 0

@Дима_Кирсанов 5 / 5 / 7 Регистрация: 08.10.2010 Сообщений: 228
	09.06.2015, 13:04 [ТС]
	Shakalaka, как мне вернуть числовое значение margin в этом случае, какую функцию использовать? 0

@Дима_Кирсанов 5 / 5 / 7 Регистрация: 08.10.2010 Сообщений: 228
	09.06.2015, 14:42 [ТС]
	Игор35, pageY и pageX - а разве X и Y не могут быть равны? Что предлагаете делать тогда? 0

@Игор35 23 / 23 / 7 Регистрация: 26.08.2013 Сообщений: 334
	09.06.2015, 16:17
	Если я все правильно понял, то вот http://codepen.io/anon/pen/NqjmGN 0