Jump to content
  • 0

не работает onclick

rediskavet

Asked by rediskavet,

 Share

Question

rediskavet Explorer

rediskavet

Posted
Posted

пример тут

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

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

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0
stars Explorer

stars

Posted
Posted

Насколько я понимаю ваш 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';
	}

} }

Link to comment
Share on other sites
  • 0
rediskavet Explorer

rediskavet

Posted
  • Author
Posted (edited)

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

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

Edited by rediskavet
Link to comment
Share on other sites
  • 0
rediskavet Explorer

rediskavet

Posted
  • Author
Posted (edited)

При клике(потом будет на маусовер) по блоку с картинкой, блок с текстом должен появляться или пропадать, в зависимости от свойства 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 by rediskavet
Link to comment
Share on other sites
  • 0
stars Explorer

stars

Posted
Posted

Я бы делал примерно так на 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';
	}
}

Link to comment
Share on other sites
  • 0
rediskavet Explorer

rediskavet

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

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

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

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

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

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

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted

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

Во-первых. Метод 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';
	}

}

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept