Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Вопрос по объектам

Автор: chdan 13.8.2006, 15:39

Не обессудьте конечно, с javascript сталкиваюсь изредка.

Есть форма на html. Хочу по нажатию на кнопку спрятать текст в одной из форм.

Я думал, это можно сделать, если я напишу так:

Код


<p id=Text1>Какой-то текст, который я хочу по событию спрятать</p>

и уже в функции, вызываемой по событию OnClick:

Код


var Text = document.getElementById(Text1);
Text = 'Изменен';

Короче, косяк тут явно принципиальный. Посоветуйте, как можно сделать то что я хочу.

Автор: Gaioz 13.8.2006, 15:47

Много способов.
Вот один из них:

Код


<html>
 <head>
  <script type="text/javascript">
   <!--
  function text(){
document.getElementById("Text1").innerText="Новый текст";
}
 
  //--> 
</script>
</head>
<body>
 <p id="Text1" onMouseOver="text()">Какой-то текст, который я хочу по событию спрятать</p>
</body>
</html>

Добавлено @ 15:48
И не забывай про кавычки в инициализации объекта (id именуется в кавычках)

Автор: chdan 13.8.2006, 15:53

Класс! Спасибо! А может порекомендуете литературу еще, где можно посмотреть свойства типа innerText smile

Автор: Gaioz 13.8.2006, 15:59

Цитата

Класс! Спасибо! А может порекомендуете литературу еще, где можно посмотреть свойства типа innerText

Можно в принципе в интернете поискать, там точно этого добра навалом, а можно и книгу приобрести, вот только что посоветовать не знаю, сам особо не вникал в JS smile

Могу сказать лиш что innerText это что то типа ссылки на текст между тегов, т.е. в принципе можно изменять текст между любыми тегами.

Автор: vasac 13.8.2006, 18:34

Так же могу добавить, что innerText поддерживается только IE. В данном случае все тоже самое можно сделать просто заменив innerText на innerHTML, который поддерживается гораздо шире, хотя тоже не соответствует стандартам.

Запись же текста в элемент с затиранием предыдущего текста, в соответствии со стандартами делается несколько сложнее:

Код


while ( el.firstChild ) el.removeChild( el.firstChild );
el.appendChild( document.createTextNode( "Текст" ) );

Автор: Sardar 14.8.2006, 01:57

Цитата(chdan @ 13.8.2006, 14:53

)

А может порекомендуете литературу еще,

В топе "Хорошая (online/offline) документация" лежат не плохие мануалы. Советую http://wdh.suncloud.ru

Автор: Gaioz 14.8.2006, 09:44

vasac, можешь обеснить что есть el?
У меня выходит только так?

Код


function text(el) {
  if(document.getElementById(el).firstChild) 
alert("Есть объект");  
 }

Автор: vasac 14.8.2006, 10:38

el есть elемент. Просто любой html(dom)-элемент (полученный, например, через getElementById) в который записывается текст.

Код


if(document.getElementById(el).firstChild)

Этим ты проверяешь есть ли у элемента (с id равным значению переменной el) хотя бы один потомок.

Если нужно проверить есть ли элемент с заданным id:

Код


if(document.getElementById(id)) {...

Автор: Gaioz 14.8.2006, 10:51

Цитата

el есть elемент. Просто любой html(dom)-элемент (полученный, например, через getElementById) в который записывается текст.

Чесно говоря не совсем понятно. Можешь переделать этот пример.

Код


<html>
 <head>
  <script type="text/javascript">
   <!--
 function text(){
  while ( el.firstChild ) el.removeChild( el.firstChild );
el.appendChild( document.createTextNode( "Текст" ) );
   }

 //--> 
</script>
</head>
<body>
 <p id="Text1" onMouseOver="text(this.id)">Какой-то текст, который я хочу по событию спрятать</p>
</body>
</html>

Цитата

Этим ты проверяешь есть ли у элемента (с id равным значению переменной el) хотя бы один потомок.

Лично я почему то задумываюсь о нулях и еденицах smile

видимо от C++ привычка smile

Автор: Sardar 14.8.2006, 11:03

Цитата(Gaioz @ 14.8.2006, 09:51

)

Лично я почему то задумываюсь о нулях и еденицах smile видимо от C++ привычка smile

Ну если это так, то почему функция text без аргументов? Откуда должно браться el? Замени text() на text(el), а в onmouseover замени text(this.id), на text(this).

Автор: Gaioz 14.8.2006, 12:09

Цитата

Ну если это так, то почему функция text без аргументов?

Блин забыл вставить.....
Ну все равно, так не пашет smile

Автор: vasac 14.8.2006, 13:59

Код


/* Функция вставки текста в DOM-элемент 
 @param object — элемент, куда вставляем.
 @param string — вставляемый текст
*/
function setText( el, text ) {
  while ( el.firstChild ) el.removeChild( el.firstChild ); // Очистить элемент.
  el.appendChild( document.createTextNode( text ) );
  return el;
} // setText().

Аттрибут абзаца:

Код


onMouseOver="setText( this, &quot;Нужный текст&quot; )"

дальше сам...

Автор: chdan 21.8.2006, 11:08

По вопросу "Как удалять/создавать объекты на экране ".

Если у меня

Код


<p id=Text1>Какой-то текст, который я хочу по событию спрятать</p>

Я могу спрятать текст используя document.getElementById("Text1").innerText="";

Однако возникает другая ситуация, когда надо удалить объект.

Например тег <input type="text" id=Form1>.

Я вижу два выхода, оба гемморойные. Не судите строго, ибо на JS я пишу редко.

1) Забить теги в условие функции и выводить по событию тот набор, который сейчас актуален

2) Не писать теги, а создавать все через объекты

Уверен, что "удалить тег" можно. Намекните как? smile

Автор: vasac 21.8.2006, 11:41

chdan, повторяю, если ты даже делаешь так, то используй innerHTML в данном случае результат будет абсолютно тем же, но innerText работает только в IE и неизвестно долго ли проработает еще.

Удалить тэг (не тэг все-таки, а элемент) можно из родительского объекта.

Код


var el = document.getElementById( "Form1" ); // Получили элемент.
var par = el.parentNode; // Получили его предка.
par.removeChild( el ); // Удалили элемент из списка потомков родительского объекта.

Автор: chdan 21.8.2006, 11:52

Спасибо

, про innerHTML тоже понял.

Автор: Avb 21.8.2006, 12:06

"Удалить" объект можно просто спрятав:
el.style.display = "none";

Затем при необходимости его можно снова отобразить:
el.style.display = "";

Чтобы изменить текст необязательно удалять и добавлять потомков.
Для этого можно изменить свойство nodeValue соответствующей ноды.
Для:

Код


<p id="Text1">Какой-то текст, который я хочу по событию спрятать</p>

document.getElementById( "Text1" ).firstChild.nodeValue = "Новый текст";

Автор: vasac 21.8.2006, 12:32

Цитата(Avb @ 21.8.2006, 12:06

)

Чтобы изменить текст необязательно удалять и добавлять потомков.
Для этого можно изменить свойство nodeValue соответствующей ноды.

Если уверен, что внутри элемента есть текст и только он и ничего больше, то да, так проще.

Автор: Avb 21.8.2006, 12:39

Цитата(vasac @ 21.8.2006, 12:32

)

текст и только он и ничего больше

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

А если кроме текста есть еще другие дети, то достаточно знать какой по счету является наша текстовая нода:
document.getElementById( "Text1" ).childNodes[i].nodeValue = "Новый текст";

Автор: chdan 23.8.2006, 14:35

Avb, спасибо