Використання кнопки HTML для виклику функції JavaScript

Я намагаюся використовувати кнопку HTML для виклику функції JavaScript.

Ось код:

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

Це, здається, не працює правильно. Чи є кращий спосіб зробити це?

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

Існує кілька способів обробляти події за допомогою 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, вам буде простіше зрозуміти, чи працює він в інших браузерах, коли ви оновлюєте код.

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

якщо за допомогою jQuery ви можете зробити щось на кшталт:

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

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

Ваш 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()"

тоді все повинно працювати :)

Одна з основних ваших проблем полягає в тому, що ви використовуєте нюх браузера без поважних причин:

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. Чи підтримує Chromedocument.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;
}

допомогло б.

У цьому рядку код не вдається:

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

Я намагався крокувати, хоча це з firebug, і він не вдається. це повинно допомогти вам з’ясувати проблему.

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

У мене є інтелектуальний код кнопки функцій зворотного дзвінка:

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

ПРОСТИЙ ВІДПОВІДЬ:

   onclick="functionName(ID.value);

Де ID - ідентифікатор поля введення.

дурний спосіб:

onclick="javascript:CapacityChart();"

Вам слід прочитати про дискретний javascript і використовувати метод прив'язки фреймворків для прив’язки зворотних викликів до подій dom.