Javascript-форум - Подвинуть элемент влево при событии onmouseover

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Подвинуть элемент влево при событии onmouseover (https://javascript.ru/forum/misc/56400-podvinut-ehlement-vlevo-pri-sobytii-onmouseover.html)

Подвинуть элемент влево при событии onmouseover

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

function Init()
{
  
  document.getElementById("left").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))
    
	{   
      computedStyle.marginLeft = parseInt(computedStyle.marginLeft)+5+"px";
    }  
  }

  
}
 
window.onload = Init;

.crazycircle
{
  position: absolute;
  margin-top: 300px;    
  margin-left: 450px;
  width: 60px;
  height: 60px;
  background: url(circleimg/sadsmileface.jpeg);
}

.left
{
  position: relative;
  top: 0px;
  left: 0px;
  width: 5px;
  height: 55px;  
  background-color: green;
}

.right
{
  position: relative;
  top: -55px;
  left: 55px;
  width: 5px;
  height: 55px;  
  background-color: green;
}

.top
{
  position: relative;
  top: -115px;
  left: 0px;
  width: 60px;
  height: 5px;  
  background-color: green;
}

.low
{
  position: relative;
  top: -60px;
  left: 0px;
  width: 60px;
  height: 5px;  
  background-color: green;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CrazyCircle</title>
    <link href="circlecss/crazycircle2.css" rel="stylesheet">
  </head>
  <body>
    <div>
	  <div class = "crazycircle" id = "crazycircle">
	    <div class = "left" id = "left"></div>
		<div class = "right" id = "right"></div>
		<div class = "top" id = "top"></div>
		<div class = "low" id = "low"></div>
	  </div>
	</div>  
    <script src = "/js/CrazyCircle.js"></script>
  </body>
</html>

первая проблемма
неправильно

window.onload = Init;

правильно

window.onload = Init*!*()*/!*;

когда навожу мышку - в консоли ошибка

*!*
NoModificationAllowedError: Modifications are not allowed for this document
*/!*

я тоже вижу эту ошибку в 19 строке .js. А что она означает и как её исправить?

Дмитрий_Кирсанов,

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CrazyCircle</title>
<style>
.crazycircle
{
  position: absolute;
  margin-top: 300px;
  margin-left: 450px;
  width: 60px;
  height: 60px;
  background: url(circleimg/sadsmileface.jpeg) rgb(255, 0, 0);
}

.left
{
  position: relative;
  top: 0px;
  left: 0px;
  width: 5px;
  height: 55px;
  background-color: green;
}

.right
{
  position: relative;
  top: -55px;
  left: 55px;
  width: 5px;
  height: 55px;
  background-color: green;
}

.top
{
  position: relative;
  top: -115px;
  left: 0px;
  width: 60px;
  height: 5px;
  background-color: green;
}

.low
{
  position: relative;
  top: -60px;
  left: 0px;
  width: 60px;
  height: 5px;
  background-color: green;
}


</style>
  </head>
  <body>
    <div class="x">
	  <div class = "crazycircle" id = "crazycircle">
	    <div class = "left" id = "left"></div>
		<div class = "right" id = "right"></div>
		<div class = "top" id = "top"></div>
		<div class = "low" id = "low"></div>
	  </div>
	</div>
    <script>function Init()
{

  document.getElementById("left").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))

	{
      document.getElementById("crazycircle").style.marginLeft = parseInt(computedStyle.marginLeft)+5+"px";
    }
  }


}

window.onload = Init();
</script>
  </body>
</html>

document.getElementById("crazycircle").style.margi nLeft - всё гениальное просто. Не правда ли?