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

Question

Я пытаюсь использовать кнопку HTML для вызова функции JavaScript.

Вот код:

<input type="button" value="Capacity Chart" onclick="CapacityChart();">

Хотя, похоже, он работает неправильно. Есть ли лучший способ сделать это?

Вот ссылка: http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html нажмите на вкладку емкости в левом нижнем разделе. Кнопка должна генерировать предупреждение, если значения не изменились, и должна генерировать диаграмму, если вы вводите значения.

Answer 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-й и 2-й методы являются взаимоисключающими, то есть использование одного (2-го) переопределит другое (1-го). Третий метод позволит вам присоединить столько же функций, сколько вам нужно, к одному и тому же обработчику событий, даже если был использован 1-й или 2-й метод.

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

CapacityWindow.document.write(s);

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

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

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

Answer 2

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

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

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

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

Answer 3

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

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

Edit:

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

Answer 4

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

Answer 5

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

Так что это должно выглядеть так: onclick="CapacityChart()"

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

Answer 6

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

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

Я попытался пройти через Firebug, и там ничего не получилось это должно помочь вам разобраться в проблеме.

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

Answer 7

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

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

поможет.

Answer 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>

Answer 9

глупый путь:

onclick="javascript:CapacityChart();"

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