не работает onclick

rediskavet · July 21, 2010

пример тут

ни чего не понимаю, код взял от рабочего примера, а тут не работает, Фаербаг пишет "text.style is undefined", text это переменная которая определяется раньше. в стялях для text прописал display:none;

На помощь форумчане, спасайте мой мозг!

stars · July 21, 2010

Насколько я понимаю ваш JS выполняется еще до появления дум дерева... соответственно и эффекта ноль... Попробуйте:

window.onload = function (){
var wrapper=document.getElementsByName('wrapperAuthorInfoDisplayblock');
var text=document.getElementsByName('ADN');
var td=document.getElementsByName('AuthorInfo');
var img=document.getElementsByName('AuthorFoto');
function f(){
	if(text.style.display !=='block'){
		text.style.display='block';
	}
	else
	{
		text.style.display= 'none';
	}

} }

rediskavet · July 21, 2010

я так тоже пробовал, тогда не видно функцию f (f is not defined )-это опять же по словам фаербага.

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

Edited July 21, 2010 by rediskavet

stars · July 21, 2010

хорошо, а что вообще нужно получить то?

rediskavet · July 21, 2010

При клике(потом будет на маусовер) по блоку с картинкой, блок с текстом должен появляться или пропадать, в зависимости от свойства display.

Это на первом этапе, потом я хочу еще фон затемнять, на примере это не показано так-как кроме этих двух блоков нет ни чего больше, а так var wrapper именно для этого и определена я этой переменной буду менять свойство opacity, а блок с фото и текстом выводить на один слой выше.

Вот код хтмл

<html>
<head>
<script src="Author.js" type="text/javascript"></script>
<link rel="stylesheet" href="newcss2.css" type="text/css" />
</head>
<body>
<div id="wrapperAuthorInfoDisplayblock" name="wrapperAuthorInfoDisplayblock">
<div id="bottomblockimg" name="AuthorInfo" onclick="f()">
	<img src="img/Penguins.jpg" alt="" id="AuthorFoto" name="AuthorFoto">
</div>
<div id="ADN" name="ADN">
	 text text text text text text text text text text text text text text text text text text text text text text text text
	  text text text text text text text text text text text text text text text text text text text text text text text text
	   text text text text text text text text text text text text text text text text text text text text text text text text
</div>
</div>
</body>
</html>

CSS

body {
	font: 100%  "Times New Roman", Times, serif;
	background: #000000;
	margin: 0;
	padding: 0;
	color: #cccccc;
}

#wrapperAuthorInfoDisplayblock{
float: left;
width: 100%;
}

#ADN{
background-color: #48474D;
margin: 120px 50px 0 312px;
display: none;
}

div #bottomblockimg{
background-color: #1f1e21;
height: 234px;
margin: 120px;
float: left;
}

	div #bottomblockimg:hover{
	background-color: #48474d;
	}

	div #bottomblockimg img{
	margin: 40px;
	border: 2px solid #fff;
	}

Edited July 21, 2010 by rediskavet

Great Rash · July 21, 2010

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

rediskavet · July 21, 2010

для начала сделал, может есть идеи для продолжения?

stars · July 21, 2010

Я бы делал примерно так на jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css"> 
*{
margin: 0;
padding: 0;
}


body {
	font: 100%  "Times New Roman", Times, serif;
	background: #000000;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5
 browsers. The text is then set to the left aligned default in the #container selector */
	color: #cccccc;
}

#wrapperAuthorInfoDisplayblock{
float: left;
width: 100%;
}

#ADN{
background-color: #48474D;
margin: 120px 50px 0 312px;
display: block;
}

div #bottomblockimg{
background-color: #1f1e21;
height: 234px;
margin: 120px;
float: left;
}

	div #bottomblockimg:hover{
	background-color: #48474d;
	}

	div #bottomblockimg img{
	margin: 40px;
	border: 2px solid #fff;
	}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(function(){
		$('div#bottomblockimg').click(function (){
			if ($('div#ADN').is(':hidden')){
						$('div#ADN').show();
					} else {$('div#ADN').hide();}
		  });
});
</script>
</head>
<body>
<div id="wrapperAuthorInfoDisplayblock" name="wrapperAuthorInfoDisplayblock">
<div id="bottomblockimg" class="AuthorInfo" name="AuthorInfo" onmouseover="f()">
	<img src="http://red.dax.ru/black/img/Penguins.jpg" alt="" id="AuthorFoto" name="AuthorFoto">
</div>
<div id="ADN" name="ADN">
	 text text text text text text text text text text text text text text text text text text text text text text text text
	  text text text text text text text text text text text text text text text text text text text text text text text text
	   text text text text text text text text text text text text text text text text text text text text text text text text
		text text text text text text text text text text text text text text text text text text text text text text text text
		 text text text text text text text text text text text text text text text text text text text text text text text text
		  text text text text text text text text text text text text text text text text text text text text text text text text
		   text text text text text text text text text text text text text text text text text text text text
			text text text text text text text text text text text text text text text text text text text text text text text text
			 text text text text text text text text text text text text text text text text text text text text text text text text
</div>

</div>
</body>
</html>

на js наверно как то так:

window.onload = function (){
document.getElementsByID('bottomblockimg').onclick = makeIT;
}
function makeIT (){
var text = document.getElementsByID('ADN');
	if(text.style.display!='block'){
		text.style.display='block';
	}
	else
	{
		text.style.display= 'none';
	}
}

psywalker · July 21, 2010

Вместо document.getElementsByName нужно использовать document.getElementsByID, чувствуешь разницу?

Great Rash · July 21, 2010

Quote
для начала сделал, может есть идеи для продолжения?

Ничего вы не сделали http://red.dax.ru/black/index2.html

rediskavet · July 21, 2010

psywalker said:
Вместо document.getElementsByName нужно использовать document.getElementsByID, чувствуешь разницу?

Почему нужно, скорее можно. т.е. можно и так и так.

Great Rash said:
Ничего вы не сделали http://red.dax.ru/black/index2.html

Да извиняюсь, сделал, но на сервер не перезалил, сейчас уже залил. Все равно не работает.

Сейчас ковыряю код который Stars дал, пока не хочет работать. Спасибо за решение на jquery, там как всегда все элементарно, но я хочу на js изловчится(хотя если не смогу то воспользуюсь jquery).

Всем спасибо что подключились решению проблемы.

psywalker said:
Вместо document.getElementsByName нужно использовать document.getElementsByID, чувствуешь разницу?

Почему нужно, скорее можно. т.е. можно и так и так.

Great Rash said:
Ничего вы не сделали http://red.dax.ru/black/index2.html

Да извиняюсь, сделал, но на сервер не перезалил, сейчас уже залил. Все равно не работает.

Сейчас ковыряю код который Stars дал, пока не хочет работать. Спасибо за решение на jquery, там как всегда все элементарно, но я хочу на js изловчится(хотя если не смогу то воспользуюсь jquery).

Всем спасибо что подключились решению проблемы.

Searcher · July 21, 2010

Куда залили? Все как было так и осталось...

rediskavet · July 21, 2010

сейчас точно залил.

Searcher · July 21, 2010

Читайте внимательно мануалы.

Во-первых. Метод document.getElementsByName(name) возвращает все элементы, у которых имя (атрибут name) равно данному.

Он работает только с теми элементами, для которых в спецификации явно предусмотрен атрибут name: это form, input, a, select, textarea и ряд других, более редких. Т.е. никак вы этим методом не получите адекватного результата.

Метод document.getElementsByName не будет работать с остальными элементами типа div,p и т.п.

Во-вторых, getElementById, а не getElementsByID.

В-третьих, я не знаю каким алертом и где вы там проверяли, но на момент срабатывания скрипта еще не существует ADN.

Ваша функция будет выглядеть так:

function f(){
var text = document.getElementById('ADN');
	if(text.style.display !=='block'){
		text.style.display='block';
	}
	else
	{
		text.style.display= 'none';
	}
}

И все равно она не будет работать адекватно, поскольку при первом обращении text.style.display будет равно пустой строке.

И вот вы тычитесь как малый ребенок не понимая сути того, что делаете. Зачем все переменные в функцию запихнули?! Зачем её в onload воткнули?! Вобщем так вот ваш файл со скриптом должен выглядеть:

window.onload = function (){
	var wrapper=document.getElementById('wrapperAuthorInfoDisplayblock');
	var td=document.getElementById('AuthorInfo');
	var img=document.getElementById('AuthorFoto');
}
function f(){
	var text=document.getElementById('ADN');
	if(text.style.display !=='block'){
		text.style.display='block';
	}
	else
	{
		text.style.display= 'none';
	}

}

rediskavet · July 21, 2010

Searcher спасибо, работает на компе, только на сайте какое то гонево.

Great Rash · July 21, 2010

Скрипт не существует, вот и гонево...

http://red.dax.ru/black/Author.js - 404

rediskavet · July 21, 2010

Quote
Скрипт не существует, вот и гонево...

Не это нормально, ты не видел че там до этого было. Похоже нужно другой хостинг поискать.

Sign In

не работает onclick

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information