Иллюстрированный самоучитель по Adobe GoLive 6 - Обработка форм [стр. 154]
Рис. 7.10 . Окно браузера с результатом отображения файла, приведенного в листинге 7.10, после того как пользователь выбрал второй переключатель
Итак, рассмотрим механизм изменения содержимого отдельных элементов оформления Web-страницы, инициируемого действиями пользователя. Изменения происходят после того, как пользователь активизирует один из двух переключателей. Для этого мы в определении этих переключателей указали, что событие onclick , возникающее при одиночном щелчке мыши на нем, будет обрабатываться функцией changeiist . В качестве параметра данной функции передается единица или двойка, в зависимости от выбранного удаленным пользователем варианта.
Теперь рассмотрим принцип действия функции changeiist . Она призвана изменять содержимое выпадающего списка имен. Также, она изменяет текст, отображаемый перед этим списком. По умолчанию мы создали Web-страницу, ориентированную на мужчин. Как только пользователь при помощи соответствующего переключателя указывает, что он является женщиной, программа-скрипт изменяет список имен, вставляя туда мужские имена, и модифицирует текстовую строку перед этим списком (рис. 7.10). Естественно, необходимо учесть и тот вариант, что пользователь может несколько раз изменять свой выбор, активизируя тот или иной переключатель. Именно поэтому функция changeiist состоит из двух блоков, динамически изменяющих часть формы в зависимости от выбора удаленного пользователя.
Для того чтобы изменить имена в выпадающем списке, мы используем конструкцию следующего вида:
document.all.selectl.options[0].text
Идентификатор нашего выпадающего списка selectl . В данном случае мы осуществляем доступ к нему через коллекцию all объекта document . В самом этом объекте выпадающего списка есть коллекция options , в которой содержатся все пункты выпадающего списка. Доступ к ним осуществляется при помощи указания их номера в квадратных скобках.
Необходимо учитывать, что нумерация в коллекциях ведется с нуля.
В элементах списка мы меняем только текст, отображаемый в окне просмотра. Значение, передаваемое в обрабатывающую программу не модифицируем. А для того, чтобы изменить текст элементов списка, мы воспользовались соответствующим свойством text .
Также изменению подвергался текст абзаца с идентификатором р3 . Для того, чтобы изменить его текстовое содержимое, мы воспользовались свойством innerText , присущим данному элементу. Данное свойство содержит только текст, находящийся между граничными тегами данного элемента.
source
Комментариев нет:
Отправить комментарий