Миниигра "Найди карту".
Вложений: 1
Добрый день.
Делаю что-то типа игрушки "Найди карту". Выкладываю на стол 4 карты(картинки во вложении), вешаю на каждую событие, по которому вызывается функция обращения к соответствующей карте.
<style type="text/css">
img
{
margin:30px 5px;
cursor:pointer;
border-radius:5px;
}
div
{
background-color:#999;
}
</style>
<script type="text/javascript">
<!--
var cards= new Array("11.png","12.png","13.png","14.png","rub.png");
function opencard(num)
{
var img=document.getElementsByTagName("IMG")[num];
window.alert(num);
img.src=cards[num];
}
window.onload=function()
{
var img=document.getElementsByTagName("IMG")
for (var i=0; i<img.length;i++)
{
img[i].src=cards[img.length];
img[i].onclick=opencard(i);
}
}
//-->
</script>
<div align="center">
<img />
<img />
<img />
<img /><br>
</div>
Проблема в том что у меня карты переворачиваются не по клику а при загрузки страницы. Это связано с использованием img[i].onclick=opencard(i);. Как правильно задать события для каждой карты? |
Оно?
<!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">
</style>
<script type="text/javascript">
window.onload=function() {
var o=document.getElementsByTagName("button")
for (var i=0; i<o.length;i++) {
o[i].onclick=(function (N) {
return function (){alert(N);}
})(i);
};
};
</script>
</head>
<body>
<button>0</button>
<button>1</button>
<button>2</button>
</body>
</html>
|
ksa, wtf?
про http://learn.javascript.ru/bubbling-and-capturing не слышал? X-man, не смог спокойно смотреть на код ТС ... http://learn.javascript.ru/play/XHLNic |
Цитата:
|
ksa, нечего, просто показал косяк, если хочешь можешь по танцевать )
|
ksa, спасибо! Работает.
|
ksa, ладно ты победил, ТС за кривой код)
|
cyber, спс за способ и за инфу!
Первый раз на js пишу. |
Цитата:
И подскажи плз, почему работает только если div container идет перед скриптом в body, а при другом расположении(если перенести скрипт в head или поменять местами с div) грузится пустая страница? |
X-man, потому что скрип выполняется сразу, как загружен. И если див ниже кода, то на момент выполнения его какбэ ещё нет.
Как раз для таких случаев исползуется "window.onload=function(){" (окно.когдаЗагрузится - запустить функицю). !function - извращённый способ запустить функцию сразу после создания. |
| Часовой пояс GMT +3, время: 00:09. |