Javascript элемент скрывается не работает - PullRequest
Новая
       11

Javascript элемент скрывается не работает

1 голос
/ 21 сентября 2011

Я пытался скрыть элементы в своей html-форме, определив функцию javascript в начале моей страницы и вызвав ее через атрибут onclick кнопки.Кажется, что браузер (firefox 4.x) сначала пытается скрыть данный элемент, когда я нажимаю кнопку, но затем быстро перезагружает его.Очевидно, что без сценария браузер не пытается скрыть элемент.Вот соответствующий код: 

function showHide() {
document.getElementById('search').style.display = 'none';
}


<button onclick="showHide()">Advanced</button>

Firefox использует по умолчанию то, что находит в файле css вместо использования модификаций javascript?

Редактирование # 1: Во-первых, я пытаюсьполучить текстовое поле для редактирования, чтобы исчезнуть.Когда я нажимаю кнопку «Дополнительно», она исчезает на долю секунды, а затем снова появляется.Я попытался вернуть false в конце showHide (), но это ничего не дало, и я попытался onclick = "return showHide ();"но это не сработало.Я проверил файл css, и нет отображения: настройки, которые могут конфликтовать с этим.Я посмотрю, смогу ли я установить это на своем сервере через несколько минут и опубликую ссылку.

Редактировать № 2: Спасибо за помощь.Изменение атрибута типа кнопки устранило проблему, предотвратив по умолчанию для кнопки значение «отправить», как предлагается ниже.Это предотвратило перезагрузку формы, в результате чего элемент появлялся каждый раз, когда пытался уйти.Не то, что начинающий, как я, знал бы.

Ответы [ 3 ]

3 голосов
/ 21 сентября 2011

Элемент html <button> поддерживает атрибут type. Если опущено, по умолчанию type="submit". Это заставляет кнопку работать точно так же, как <input type="submit" />.

Итак ... если ваша кнопка находится внутри формы, то нажатие кнопки вызывает запуск обработчика щелчка (вызывая showHide ()), но затем отправляет форму. Это отправка формы, которая вызывает перезагрузку страницы.

Чтобы это исправить, просто добавьте к кнопке правильный тип: 

<button type="button" onclick="showHide()">Advanced</button>
0 голосов
/ 21 сентября 2011

Я подозреваю, что это связано с областью применения.Попробуйте это: 

<button onclick="document.getElementById('search').style.display = 'none';">Advanced</button>

, если это работает, вы не объявили свою функцию showHide() в нужном месте.Например, я могу разбить пример @ jfriend00 следующим образом:

http://jsfiddle.net/NYZrX/1/

. Это одна из причин, по которой плохая практика смешивать JavaScript в HTML-коде, все это должно бытьв глобальном масштабе ...

0 голосов
/ 21 сентября 2011

На вашей странице должно происходить что-то еще, потому что основной код прекрасно работает в Firefox и других браузерах. Вы можете попробовать демо для себя здесь: http://jsfiddle.net/jfriend00/LpC36/.

Я бы предложил вам описать, что еще может происходить на странице? Другой код? CSS? Другие объекты и взаимодействия? Форма подачи? Попробуйте показать нам HTML.

Например, если кнопка является кнопкой отправки, это может быть отправка формы и перезагрузка страницы.

...