2014-02-02 2 views
2

Я совершенно новый с JS, и это мой первый пост здесь ... Я пытаюсь создать сетку изображений (все равно), и мне это нужно, когда пользователь нажимает на один из них, функция выполняется. Надеюсь, мой код не беспорядок:JS: сетка изображений и событие onclick

cellWidth = 42; 
cellHeight = 42; 
rownumber = 10; 
columnnumber = 15; 
leftmargin = 500; 
topmargin = 150; 

for (var i = 0; i < rownumber; i++) { 
    for (var x = 0; x < columnnumber; x++) { 
    var cell = new Image(); 
    cell.src = "black.png"; 
    cell.style.position = "absolute"; 
    cell.id = x+"x"+i; 
    cell.style.left = x * cellWidth + leftmargin - cellWidth*i; 
    cell.style.top = i * cellHeight + topmargin; 
    cell.onclick=function(){alert("Hello World")}; 
    document.body.appendChild(cell); 
} 
} 

Я попытался с cell.addEventListener тоже, но ничего не произошло.

EDIT: так или иначе, это нормально работает на firefox. Есть что-то не так с моим кодом или с моим браузером?!?!

ответ

0

Это работает для меня ... проблема может заключаться в том, где вы кладете скрипт. Если вы поместите его в раздел <head>, он не будет работать так, как написано, потому что document.body еще не существует. Попробуйте положить в конец элемент <body>. Другими словами:

<head> 
    <script> 
     // document.body will be null 
    </script> 
</head> 
<body> 
    <script> 
     // document.body good to go 
    </script> 
</body> 

Если это была проблема, вы должны были увидеть сообщение журнала консоли об этом. Например, в Chrome, если вы поставите этот сценарий в разделе <head>, вы увидите следующее сообщение об ошибке на консоли вывода:

Uncaught TypeError: Cannot call method 'appendChild' of null 

Какой должна быть подсказка о том, где проблема. Всякий раз, когда у вас есть проблема всегда сначала посмотрите на консоль: он может сказать вам именно то, что вам нужно знать.

+0

Нет ... Я уже положил его в корпус ... Кроме того, консоль полностью немой! EDIT: что это ... работает на firefox! – user3263713

+0

В каком браузере он НЕ работает? –

+0

Да, вы правы, извините. Я пробовал хром и firefox, и он работает только на firefox. Это не на хроме. – user3263713

Смежные вопросы