Я пытаюсь использовать кнопку HTML для вызова функции JavaScript.
Вот код:
<input type="button" value="Capacity Chart" onclick="CapacityChart();">
Это, кажется, не работает правильно, хотя. Есть лучший способ сделать это?
Вот ссылка: http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html нажмите на вкладку емкости в левом нижнем разделе. Кнопка должна генерировать предупреждение, если значения не изменились, и должна создавать диаграмму, если вы вводите значения.
javascript
html
Форрест
источник
источник
Ответы:
Есть несколько способов обработки событий с помощью HTML / DOM. Там нет реального правильного или неправильного пути, но разные способы полезны в разных ситуациях.
1: есть определение в HTML:
2: есть добавление его в свойство DOM для события в Javascript:
3: и есть присоединение функции к обработчику событий с использованием Javascript:
И второй, и третий методы допускают встроенные / анонимные функции, и оба должны быть объявлены после анализа элемента в документе. Первый метод не является допустимым XHTML, поскольку атрибут onclick отсутствует в спецификации XHTML.
1-й и 2-й методы являются взаимоисключающими, то есть использование одного (2-го) переопределит другое (1-го). Третий метод позволит вам присоединить столько же функций, сколько вам нужно, к одному и тому же обработчику событий, даже если был использован 1-й или 2-й метод.
Скорее всего, проблема кроется где-то в вашей
CapacityChart()
функции. После посещения ссылки и запуска скрипта запускается функция CapacityChart (), и открываются два всплывающих окна (одно закрыто в соответствии со скриптом). Где у вас есть следующая строка:Попробуйте следующее:
РЕДАКТИРОВАТЬ
Когда я увидел ваш код, я подумал, что вы пишете его специально для IE. Как уже упоминалось, вам нужно заменить ссылки на
document.all
сdocument.getElementById
. Однако после этого у вас все еще будет задача исправить скрипт, поэтому я бы рекомендовал сначала заставить его работать, по крайней мере, в IE, поскольку любые ошибки, которые вы совершаете, изменяя код для работы в разных браузерах, могут вызвать еще большую путаницу. Как только он будет работать в IE, будет легче определить, работает ли он в других браузерах, пока вы обновляете код.источник
$("#clickMe").bind('click', function () { alert('hello!'); };)
Я бы сказал, что было бы лучше добавить javascript ненавязчивым способом ...
если вы используете jQuery, вы можете сделать что-то вроде:
источник
Ваш HTML и способ вызова функции с помощью кнопки выглядят правильно.
Проблема, похоже, заключается в
CapacityCount
функции. Я получаю эту ошибку в моей консоли в Firefox 3.5: «document.all не определен» в строке 759 файла bendelcorp.js.Редактировать:
Похоже, что
document.all
это вещь только для IE и нестандартный способ доступа к DOM. Если вы используетеdocument.getElementById()
, это, вероятно, должно работать. Пример:document.getElementById("RUnits").value
вместоdocument.all.Capacity.RUnits.value
источник
Это выглядит правильно. Я предполагаю, что вы определили свою функцию с другим именем или в контексте, который не виден кнопке. Пожалуйста, добавьте код
источник
Как вы знаете, точка с запятой ( ; ) не должна присутствовать в кнопке при вызове функции.
Так что это должно выглядеть так:
onclick="CapacityChart()"
тогда все должно работать :)
источник
Одна из основных проблем, с которой вы столкнулись, заключается в том, что вы используете перехватчик браузера без уважительной причины:
Я на Chrome, так
navigator.appName
не будетNetscape
. Поддерживает ли Chromedocument.all
? Может быть, но опять же, может быть, нет. А как насчет других браузеров?Версия кода в
Netscape
ветке должна работать в любом браузере вплоть до Netscape Navigator 2 от 1996 года, поэтому вам, вероятно, следует просто придерживаться этого ... за исключением того, что он не будет работать (или не гарантированно будет работать) ) потому что вы не указалиname
атрибут дляinput
элементов, поэтому они не будут добавлены вelements
массив формы как именованные элементы:Либо дайте им имя и используйте
elements
массив, либо (лучше) используйтекоторый будет работать во всех современных браузерах - ветвление не требуется. Просто чтобы быть в безопасности, замените этот сниффинг для версии браузера больше или равной 4 проверкой
getElementById
поддержки:Вы, вероятно, хотите проверить свои данные; что-то вроде
помог бы.
источник
document.getElementById
и удалять другие материалы.Ваш код не работает в этой строке:
я попытался сделать это с помощью firebug, и там ничего не вышло. это должно помочь вам разобраться в проблеме.
Вы ссылаетесь на JQuery. Вы могли бы также использовать это во всех этих функциях. это значительно очистит ваш код.
источник
У меня есть интеллектуальный код кнопки вызова функции:
источник
ПРОСТО ОТВЕТ:
Где ID - это идентификатор поля ввода.
источник
глупый путь
Вы должны прочитать о дискретном javascript и использовать метод связывания frameworks для привязки обратных вызовов к событиям dom.
источник
javascript:
Протокол не требуется вonclick
случае. Событие onclick уже является javascript.javascript:
Протокол для выполнения JavaScript в атрибуте HREF звена.