[решено] JavaScript. Скрыть/показать элемент по событию.

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)

- Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)

JavaScript. Скрыть/показать элемент по событию.

Только начал изучать ЯваСкрипт… Вот только принялся делать маленький скриптик, и не работает. Суть скрипта вот в чем: Есть ячейка, при нажатии на которую, должна появлятся еще одна таблица. Где — в данный момент не важно, да и что внутри, тоже пока не важно. Вот скрипт что у меня получился. Просьба сильно не пинать, я только-только начал познавать азы.

Код:

<body id="body" name="body">

<form id="form" name="form">

<table width="50" height="50" border="inset">

<tr width="50" height="50"><td onclick=showmenu1(); width="50" height="50">mainTD</td></tr>

</table>

</form>

<div id=popupmenu name=popupmenu> </div>

<script>

function showmenu1(){

popupmenu.style='position: absolute; top:51; left:1'

popupmenu.innerHTML="<table border="inset" width="20" Height="20"><tr><td>td1</td></tr></table>"

}

</script>

</body>

Цитата:

Цитата System Failure

popupmenu.style

Так просто нельзя к элементу обращаться.
Его сначало найти нужно

HTML код:

document.getElementById("popupmenu")....

Цитата:

Цитата System Failure

onclick=showmenu1();

Наверно лучше вот так

HTML код:

onclick="showmenu1()"

System Failure
А вообще для отладки скриптов советуют браузер FireFox с расширением FireBug - там ошибки быстрей и точней находятся

2 vadimiron, исправил как вы написали, все равно не работает=( А нету часом какой-нить утилитки для отладки? неахота ставить дополнительно браузер.... и про "getElementById" че-то в учебнике умолчали….

Цитата:

Цитата System Failure

А нету часом какой-нить утилитки для отладки?

Так её тоже ставить нужно :)

Поставьте FireBug и работа быстрей пойдёт

HTML код:

<html><head><title>1</title>

</head>

<body id="body" name="body">

<form id="form" name="form">

<table width="50" height="50" border="inset">

<tr width="50" height="50"><td onClick="showmenu()">mainTD</td></tr>

</table>

</form>



<div id=popupmenu name=popupmenu></div>

<script>

<!--

function showmenu(){

var popupmenu = document.getElementById('popupmenu');

popupmenu.innerHTML='<table style="background-color:red"><tr><td>Котти-кун - повелитель мануалов!</td></tr></table>';

popupmenu.style="position:absolute; top: 100px; left:100px";

}

//-->

</script>

</body>

</html>

Пояснения к скрипту:
сначала делаем сокращение (переменной присваиваем идентификатор элемента)
потом уже обращаемся к этому сокращению и его свойствам.
Не забываем ставить точки с запятой.

Спасибо! если что, еще обращусь? а то учебник у мну совсем отстой видимо=(( :closed-to

System Failure, обращайся. Для этого форум и создан.
По секрету: у меня вообще нет учебника по JS (ни бумажного, ни электронного). И сам JS я знаю на уровне новичка. Сейчас зашёл на сайт nVidia.com и сделал скрипт по аналогии)))

Coutty, мде.... ну уж лучше знать на уровне новичка=) я то можно сказать воопще не знаю.... но вот кстати присвоение стиля дескриптору "<div>" все равно не работает=(

ааааа... помогите настроить "popupmenu.style"!! все перепровал! ниче не выходит=( а учебника нет под рукой=((( ::cry

решил проблему, тем что вставил "popupmenu.innerHTML" все необходимые свойства. Теперь есть вопрос, так как у меня не одна ячейка будет, а 16, следовательно нужно, чтобы и "popupmenu" появлялось не в одном и томже месте. Можно это сделать, указав в "onClick="showmenu("координат1", "координат2")""? если можно, то как эти координаты потом правильно ввести в скрипте? Можно, кончно написать 16 скриптов..... но это не дело... в "popupmenu" будутеще необходимые функции. в таком случае кол-во скриптов может увеличится еще в несколько раз.

Цитата:

Цитата System Failure

помогите настроить "popupmenu.style"!! все перепровал! ниче не выходит=(

В приведённом примере работало?
У меня - работало (Опера 9.20).
Дописывай через точку с запятой то, что тебе нужно:

HTML код:

popupmenu.style="position:absolute; top: 100px; left:100px; background-color:green; color:yellow; font-weight:bold";

Цитата:

Цитата System Failure

так как у меня не одна ячейка будет, а 16, следовательно нужно, чтобы и "popupmenu" появлялось не в одном и томже месте.

Пиши так:

HTML код:

<html><head><title>1</title>

</head>

<body id="body" name="body">

<form id="form" name="form">

<table width="50" height="50" border="inset">

<tr><td onClick="showmenu(100, 100, 'Котти-кун повелитель мануалов')">first</td></tr>

<tr><td onClick="showmenu(100, 200, 'Котти-кун любитель анимэ')">second</td></tr>

<tr><td onClick="showmenu(100, 300, 'Котти-кун повелитель вселенной! =^_^=')">third</td></tr>

</table>

</form>



<div id=popupmenu name=popupmenu></div>

<script>

<!--

function showmenu(x, y, text){

var popupmenu = document.getElementById('popupmenu');

popupmenu.innerHTML='<table><tr><td>' + text + '</td></tr></table>';

popupmenu.style="position:absolute; top: " + y + "px; left:" + x + "px; background-color:yellow;";

}

//-->

</script>

</body>

</html>

Что изменилось:
1. Объявлении функции добавлены параметры x, y и text. Можно написать сколько угодно, с любыми именами и даже присвоить значение по умолчанию - пиши, например: function showmenu(x, y, text="текст по умолчанию")
2.1. Теперь эти параметры нужно передать в функцию. Для этого, как видно, используется такой метод: onClick="showmenu(100, 100, 'Котти-кун повелитель мануалов')". Нужно обратить внимание, что если по краям используются двойные кавычки, то внутри надо использовать одинарные. И наоборот. Если же нужно использовать двойные, то они экранируются обратным слэшем: onClick="showmenu(100, 100, \"Котти-кун повелитель мануалов\")" (пишу по памяти, поэтому, быть может, к JavaScript'у это и не относится).
2.2. При передаче параметров цифры заключать в кавычки не обязательно. Текст - обязательно.
3. Теперь эти параметры надо задействовать:
popupmenu.innerHTML='<table><tr><td>' + text + '</td></tr></table>';
Тут вместо параметра text подставляется значение, переданное в функцию. Плюсы используются для объединения строк. Нужно обратить внимание, что текст, написанный до плюса (и после тоже) должен быть заключён в кавычки. Т.е. так работать не будет (точнее - переменная не подставится): popupmenu.innerHTML='<table><tr><td> + text + </td></tr></table>';
Без плюсов, соответственно, тоже не подставится: popupmenu.innerHTML='<table><tr><td>text</td></tr></table>';

Цитата:

Цитата System Failure

Можно, кончно написать 16 скриптов..... но это не дело...

Неправда! Так поступают настоящие программисты! =^_^=

спасибо тебе, о гуру JS! :pray: :pray: :pray: Гы.... что за напасть... никак не пойму. при работе с "popupmenu.style" выдает ошибку "член группы не найден", и соответственно необходимые данные не появляются где мне надо=( вызов переменных правильно указан? я написал в ячейке переменную, но она отразилась в виде текста.

решил проблему следующим путем:

HTML код:



<html><head><title>1</title>

</head>

<body id="body" name="body">

<form id="form" name="form">

<table width="50" height="50" border="inset">

<tr><td onClick="showmenu(100, 100)">first</td></tr>

<tr><td onClick="showmenu(100, 200)">second</td></tr>

<tr><td onClick="showmenu(100, 300)">third</td></tr>

</table>

</form>



<div id="popupmenu"  style="background-color: rgb(0, 102, 204); position:absolute; 



visibility:hidden"></div>

<script>

<!--

function showmenu(x, y, text){

var popupmenu = document.getElementById('popupmenu');

popupmenu.innerHTML='<table><tr><td>01</td></tr></table>';

popupmenu.style.top =  x ;

popupmenu.style.left =  y ;

popupmenu.style.visibility = "visible";

}

//-->

</script>

</body>

</html>

Обратите внимание на заданный заранее стиль спрятанного "ДИВа". На этом все. будут вопросы - напишу новый топик. Этот можно считать решенным и закрыть.