Использование кнопки HTML для вызова функции JavaScript

Есть несколько способов для обработки событий с HTML/дом. Там's отсутствие реальной правильного или неправильного способа, но различные способы полезны в разных ситуациях.

1: там'ы определив его в HTML:

<input id="clickMe" type="button" value="clickme" onclick="doFunction();" />

2: там's добавление его в собственность дом за событий в JavaScript:

//- Using a function pointer:
document.getElementById("clickMe").onclick = doFunction;

//- Using an anonymous function:
document.getElementById("clickMe").onclick = function () { alert('hello!'); };

3: и там'ы подключая функцию в обработчик событий с помощью JavaScript:

var el = document.getElementById("clickMe");
if (el.addEventListener)
    el.addEventListener("click", doFunction, false);
else if (el.attachEvent)
    el.attachEvent('onclick', doFunction);

Второй и третий способы позволяют рядный/анонимные функции, и оба должны быть объявлены после того, как элемент был разобран из документа. Первый способ это'т действительный XHTML, потому что атрибут onclick разве't в спецификации XHTML.

1-й и 2-й способы являются взаимоисключающими, что означает использование одного (2-го) будет перекрывать другие (1-й). 3-й способ позволит вам прикрепить столько функций, как вам нравится один и тот же обработчик события, даже если 1-го или 2-го метода была использована.

Скорее всего, проблема кроется где-то в CapacityChart()` функция. После посещения вашей ссылке и запуска своего скрипта, то CapacityChart() функция работает и два окна открываются (одна закрыта согласно сценария). Если у вас есть следующие строки:

CapacityWindow.document.write(s);

Вместо этого попробуйте следующее:

CapacityWindow.document.open("text/html");
CapacityWindow.document.write(s);
CapacityWindow.document.close();

Редактировать Когда я увидел ваш код, я думал, Вы ее писали специально для IE. Как уже упоминалось, вам нужно будет заменить ссылки на документ.все с документами.метода getElementById`. Однако, вы все еще есть задача исправлять скрипт после этого, так что я рекомендовал бы получить это работает, по крайней мере, т. е. сначала как любые ошибки вы делаете изменение кода, чтобы работать кросс-браузер может привести к еще большей путанице. Как только он's работает в IE, то это будет легче сказать, если это's работает в других браузерах, пока вы'вновь обновление кода.

Я бы сказал, что лучше добавить javascript ненавязчивым образом...

если вы используете jQuery, вы можете сделать что-то вроде:

<script>
  $(document).ready(function(){
    $('#MyButton').click(function(){
       CapacityChart();
    });
  });
</script>

<input type="button" value="Capacity Chart" id="MyButton" >

Ваш HTML и способ вызова функции с помощью кнопки выглядеть правильно.

Проблема появляется в CapacityCount функции. Я': &я получаю эту ошибку в консоли на Firefox 3.5;документ.все неопределено" на линии 759 от bendelcorp.js.

Редактировать:

Выглядит как документ.все это т. е.-единственное, и это нестандартный способ доступа в дом. Если вы используете документ.метод getElementById (), он, вероятно, должен работать. Пример: документ.метода getElementById("и RUnits и").значение "вместо" документ.все.Емкость.RUnits.значение

Это выглядит правильно. Я полагаю, что вы определили свою функцию либо с другим именем, либо в контексте, который не виден кнопке. Пожалуйста, добавьте немного кода

Просто, чтобы вы знали, точку с запятой(;) не должно было там быть кнопку при вызове функции.

Поэтому стоит просто посмотреть, как это: функция onclick="и CapacityChart()"в

тогда это все должно работать :)

У меня есть интеллектуальная функция-звонок-поддержка код кнопки:

<br>
<p id="demo"></p><h2>Intelligent Button:</h2>Note: Try pressing a key after clicking.<br>
Ahhhh

Одна серьезная проблема у вас заключается в том, что вы're через браузер нюхают без уважительной причины:

if(navigator.appName == 'Netscape')
    {
      vesdiameter  = document.forms['Volume'].elements['VesDiameter'].value;
      // more stuff snipped
    }
    else
    {
      vesdiameter  = eval(document.all.Volume.VesDiameter.value);
      // more stuff snipped
    }

Я'м на Хром, так навигатор.имя_приложения выиграл'т быть Нетскейп. Ли документ поддержку хром.все? Возможно, но опять же может и нет. А как насчет других браузеров?

Версия код на Нетскейп филиал должен работать на любом браузере, прямо как в Netscape навигатор 2 с 1996, так что вы, вероятно, следует просто придерживаться этого... кроме того, что он выиграл'т работу, (или это'т гарантированно работать), потому что вы не'т указанного атрибута name на ввод элементов, поэтому они выиграли'т быть добавлены в форму'массив s элементы в качестве имени элемента:

<input type="text" id="VesDiameter" value="0" size="10" onKeyUp="CalcVolume();">

Либо дать ему имя и использовать массива элементов, или (лучше) использовать

var vesdiameter = document.getElementById("VesDiameter").value;

который будет работать на всех современных браузерах - нет ветвления необходимо. Просто чтобы быть на безопасной стороне, заменить, что, вынюхивая версия браузера больше или равно 4 с чеком для метода getElementById поддержки:

if (document.getElementById) { // NB: no brackets; we're testing for existence of the method, not executing it
    // do stuff...
}

Вы, вероятно, хотите проверить ваш вклад, как хорошо; что-то вроде

var vesdiameter = parseFloat(document.getElementById("VesDiameter").value);
if (isNaN(vesdiameter)) {
    alert("Diameter should be numeric");
    return;
}

поможет.

Ваш код находится не на этой линии:

var RUnits = Math.abs(document.all.Capacity.RUnits.value);

я попробовал наступать хотя с Firebug и он не существует. это должно помочь вам выяснить проблему.

у вас есть jQuery и ссылки. вы могли бы также использовать его во все эти функции. это'Лл очистить ваш код значительно.

глупым способом:

onclick="javascript:CapacityChart();"

Вам следует прочитать о дискретном javascript, и использовать метод bind фреймворка для привязки обратных вызовов к событиям dom.