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

Ответ 1

Существует несколько способов обработки событий с помощью HTML/DOM. Там нет реального права или неправильного пути, но разные способы полезны в разных ситуациях.

1: Определяет его в HTML:

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

2: добавьте его в свойство DOM для события в 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 не указан в спецификации XHTML.

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

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

CapacityWindow.document.write(s);

Попробуйте вместо этого:

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

ИЗМЕНИТЬ
Когда я увидел ваш код, я думал, что вы его пишете специально для IE. Как уже упоминалось, вам нужно будет заменить ссылки на document.all на document.getElementById. Тем не менее, после этого вам все равно придется исправлять script, поэтому я бы рекомендовал, чтобы он работал, по крайней мере, в IE, так как любые ошибки, которые вы делаете, изменяя код для работы с перекрестным браузером, могут вызвать еще большую путаницу. После его работы в IE будет легче узнать, работает ли он в других браузерах, пока вы обновляете код.

Ответ 2

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

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

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

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

Ответ 3

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

Проблема находится в функции CapacityCount. Я получаю эту ошибку в своей консоли на Firefox 3.5: "document.all is undefined" в строке 759 из bendelcorp.js.

Edit:

Похоже, что document.all - это только для IE и является нестандартным способом доступа к DOM. Если вы используете document.getElementById(), это должно сработать. Пример: document.getElementById("RUnits").value вместо document.all.Capacity.RUnits.value

Ответ 4

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

Ответ 5

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

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
    }

Я нахожусь в Chrome, поэтому navigator.appName не будет Netscape. Поддерживает ли Chrome document.all? Может быть, но опять же, возможно, нет. А как насчет других браузеров?

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

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

Либо укажите им имя и используйте массив elements, либо (лучше) используйте

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;
}

поможет.

Ответ 6

Ваш код не работает в этой строке:

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

Я попытался сделать шаг, хотя он с firebug, и он не работает. что должно помочь вам разобраться в проблеме.

у вас есть jquery. вы можете использовать его во всех этих функциях. он значительно очистит ваш код.

Ответ 7

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

Поэтому он должен выглядеть следующим образом: onclick="CapacityChart()"

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

Ответ 8

У меня есть код кнопки с функцией функционального вызова:

<br>
<p id="demo"></p><h2>Intelligent Button:</h2><i>Note: Try pressing a key after clicking.</i><br>
<button id="button" shiftKey="getElementById('button').innerHTML=('You're pressing shift, aren't you?')" onscroll="getElementById('button').innerHTML=('Don't Leave me!')" onkeydown="getElementById('button').innerHTML=('Why are you pressing keys?')" onmouseout="getElementById('button').innerHTML=('Whatever, it is gone.. maybe')" onmouseover="getElementById('button').innerHTML=('Something Is Hovering Over Me.. again')" onclick="getElementById('button').innerHTML=('I was clicked, I think')">Ahhhh</button>

Ответ 9

глупо:

onclick="javascript:CapacityChart();"

Вы должны прочитать о дискретном javascript и использовать метод привязки frameworks для привязки обратных вызовов к событиям dom.