Миниигра "Найди карту".
Вложений: 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 - извращённый способ запустить функцию сразу после создания. |
Aetae, я его использую что бы не было глобальных переменных и функций, а так как window.onload грузиться долго , то лучше использовать DOMContentLoaded, я по привычки для примеров использую function expression
|
Цитата:
|
Кроме id вешаю у элемента еще номер строки и столбца. Первое что пришло на ум хранить эти значения например в img.alt=m; img.value=n; и это сработало, но я так понимаю есть более профессиональное решение?
function newElement(m,n,id)
{
var img = document.createElement('img');
img.src = rub;
img.id = id;
img.alt=m;
img.value=n;
return img;
}
|
X-man, почитай http://learn.javascript.ru/attribute...tom-properties
|
Цитата:
|
| Часовой пояс GMT +3, время: 00:55. |