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

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

вот код:

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

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

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

177
html javascript

9 ответов

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

скорее всего, проблема лежит где-то в

287

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

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

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

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

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

проблема, похоже, в . Я получаю эту ошибку в консоли на Firefox 3.5: "документ.все не определено " на строке 759 bendelcorp.js.

Edit:

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

6

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

3

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

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. Хром не поддерживает document.all? Может, и так, а может, и нет. А как насчет других браузеров?

версия код Netscape ветка должна работать в любом браузере прямо на пути к Netscape Navigator 2 с 1996 года, поэтому вы, вероятно, должны просто придерживаться этого... за исключением того, что это не сработает (или не работает гарантированно работает), потому что вы не указали на 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;
}

поможет.

1

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

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

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

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

1

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

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

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

1

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

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

глупо так:

onclick="javascript:CapacityChart();"

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

-1