Форум

khromenkovpd · #1 (**permalink**) 29.10.2014, 15:07

Пытаюсь запустить функцию при загрузки страницы, пробывал по разному, не получается, ниже один из вариантов, но то же не работает.
Может кто подскажет, что не так.

<head>
<title>блок</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script>
function move(id) {
var left = 1;
var top = 1;
var stepLeft = 1;
var stepTop = 1;

function frameLeft() {
left = left + stepLeft;
if (left == 100) {
stepLeft = -1;
//alert(left)
}
if (left == 0) {
stepLeft = 1;
}
id.style.left = left + 'px';
}

function frameTop() {
top = top + stepTop;
if (top == 150) {
stepTop = -1;
}
if (top == 0) {
stepTop = 1;
}
id.style.top = top + 'px';
}

var timerLeft = setInterval(frameLeft, 20);
var timerTop = setInterval(frameTop, 20);
}

</script>
</head>
<body onload = 'move("bloc")'>

<div class="div">

<div class="LL">0</div>
<div class="BG">1</div>
<div class="RR">2</div>
<div id="bloc"> 123 </div>
</div>
</body>

Спасибо.

ksa · #2 (**permalink**) 29.10.2014, 15:59

Сообщение от khromenkovpd

Может кто подскажет, что не так.

Так все в консоли и написано...

Цитата:

Cannot convert 'id.style' to object

ruslan_mart · #3 (**permalink**) 29.10.2014, 15:59

В конец скрипта:

window.onload = function() {
    move("bloc");
};

ksa · #4 (**permalink**) 29.10.2014, 16:06

Работающий вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
#bloc {
	position: relative;
}
</style>
<script type='text/javascript'>
function move(id) { 
	var left = 1;
	var top = 1;
	var stepLeft = 1;
	var stepTop = 1;
	id=document.getElementById(id);
	function frameLeft() {
		left = left + stepLeft;
		if (left == 100) {
			stepLeft = -1;
			//alert(left)
		};
		if (left == 0) {
			stepLeft = 1;
		};
		id.style.left = left + 'px';
	};
	function frameTop() {
		top = top + stepTop;
		if (top == 150) {
			stepTop = -1;
		};
		if (top == 0) {
			stepTop = 1;
		};
		id.style.top = top + 'px';
	};
	var timerLeft = setInterval(frameLeft, 20); 
	var timerTop = setInterval(frameTop, 20);
}
</script>
</head>
<body onload = 'move("bloc")'> 
<div class="div">
	<div class="LL">0</div>
	<div class="BG">1</div>
	<div class="RR">2</div>
	<div id="bloc"> 123 </div>
</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript