Verwenden einer HTML-Schaltfläche zum Aufrufen einer JavaScript-Funktion

Ich versuche, eine HTML-Schaltfläche zum Aufrufen einer JavaScript-Funktion zu verwenden.

Hier ist der Code:

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

Es scheint jedoch nicht richtig zu funktionieren. Gibt es einen besseren Weg, dies zu tun?

Hier ist der Link: http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html Klicken Sie auf die Registerkarte Kapazität im unteren linken Bereich. Die Schaltfläche sollte eine Warnung generieren, wenn die Werte nicht geändert werden, und ein Diagramm erstellen, wenn Sie Werte eingeben.

Es gibt verschiedene Möglichkeiten, Ereignisse mit HTML / DOM zu behandeln. Es gibt keinen richtigen oder falschen Weg, aber verschiedene Wege sind in verschiedenen Situationen nützlich.

1: Es wird im HTML definiert:

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

2: Es wird der DOM-Eigenschaft für das Ereignis in Javascript hinzugefügt:

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

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

3: Und es gibt eine Funktion, die mit Javascript eine Funktion an den Ereignishandler anfügt:

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

Sowohl die zweite als auch die dritte Methode ermöglichen Inline- / anonyme Funktionen und beide müssen deklariert werden, nachdem das Element aus dem Dokument analysiert wurde. Die erste Methode ist kein gültiges XHTML, da das onclick-Attribut nicht in der XHTML-Spezifikation enthalten ist.

Die 1. und 2. Methode schließen sich gegenseitig aus, dh die Verwendung der einen (2.) Methode überschreibt die andere (1.). Mit der 3. Methode können Sie beliebig viele Funktionen an denselben Ereignishandler anhängen, auch wenn auch die 1. oder 2. Methode verwendet wurde.

Das Problem liegt höchstwahrscheinlich irgendwo in Ihrer CapacityChart()Funktion. Nachdem Sie Ihren Link besucht und Ihr Skript ausgeführt haben, wird die Funktion CapacityChart () ausgeführt und die beiden Popups werden geöffnet (eines wird gemäß dem Skript geschlossen). Wo Sie die folgende Zeile haben:

CapacityWindow.document.write(s);

Versuchen Sie stattdessen Folgendes:

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

BEARBEITEN
Als ich Ihren Code sah, dachte ich, Sie schreiben ihn speziell für den IE. Wie andere bereits erwähnt haben, müssen Sie Verweise auf document.alldurch ersetzen document.getElementById. Sie haben jedoch weiterhin die Aufgabe, das Skript danach zu reparieren. Ich würde daher empfehlen, es zuerst mindestens im IE zum Laufen zu bringen, da Fehler, die Sie beim Ändern des Codes machen, um browserübergreifend zu funktionieren, noch mehr Verwirrung stiften können. Sobald es im IE funktioniert, ist es einfacher zu erkennen, ob es in anderen Browsern funktioniert, während Sie den Code aktualisieren.

Ich würde sagen, es wäre besser, das Javascript unauffällig hinzuzufügen ...

Wenn Sie jQuery verwenden, können Sie Folgendes tun:

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

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

Ihr HTML-Code und die Art und Weise, wie Sie die Funktion über die Schaltfläche aufrufen, sehen korrekt aus.

Das Problem scheint in der CapacityCountFunktion zu liegen. Ich erhalte diesen Fehler in meiner Konsole unter Firefox 3.5: "document.all is undefined" in Zeile 759 von bendelcorp.js.

Bearbeiten:

Sieht so aus, als wäre document.alles nur ein IE und eine nicht standardmäßige Möglichkeit, auf das DOM zuzugreifen. Wenn Sie verwenden document.getElementById(), sollte es wahrscheinlich funktionieren. Beispiel: document.getElementById("RUnits").valuestattdocument.all.Capacity.RUnits.value

Das sieht richtig aus. Ich denke, Sie haben Ihre Funktion entweder mit einem anderen Namen oder in einem Kontext definiert, der für die Schaltfläche nicht sichtbar ist. Bitte fügen Sie einen Code hinzu

Damit Sie wissen, sollte das Semikolon ( ; ) nicht in der Schaltfläche vorhanden sein, wenn Sie die Funktion aufrufen.

Also sollte es einfach so aussehen: onclick="CapacityChart()"

dann sollte alles klappen :)

Ein großes Problem ist, dass Sie Browser-Sniffing ohne guten Grund verwenden:

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
    }

Ich bin auf Chrome, navigator.appNamewerde es also nicht sein Netscape. Unterstützt Chrome document.all? Vielleicht, aber vielleicht auch nicht. Und was ist mit anderen Browsern?

Die Version des Codes in der NetscapeVerzweigung sollte in jedem Browser bis zu Netscape Navigator 2 von 1996 funktionieren, also sollten Sie sich wahrscheinlich einfach daran halten ... außer dass es nicht funktioniert (oder nicht garantiert funktioniert) ), weil Sie namefür die inputElemente kein Attribut angegeben haben , sodass sie nicht elementsals benannte Elemente zum Array des Formulars hinzugefügt werden:

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

Geben Sie ihnen entweder einen Namen und verwenden Sie das elementsArray oder (besser) verwenden

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

Dies funktioniert auf allen modernen Browsern - keine Verzweigung erforderlich. Um auf der sicheren Seite zu sein, ersetzen Sie dieses Schnüffeln für eine Browserversion größer oder gleich 4 durch eine Überprüfung auf getElementByIdUnterstützung:

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

Sie möchten wahrscheinlich auch Ihre Eingabe validieren. etwas wie

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

würde helfen.

Ihr Code schlägt in dieser Zeile fehl:

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

Ich habe versucht, es mit Firebug zu durchlaufen, und es schlägt dort fehl. Das sollte Ihnen helfen, das Problem herauszufinden.

Sie haben jquery referenziert. Sie können es auch in all diesen Funktionen verwenden. Dadurch wird Ihr Code erheblich bereinigt.

Ich habe einen intelligenten Funktionsrückruf-Tastencode:

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

EINFACHE ANTWORT:

   onclick="functionName(ID.value);

Wobei ID die ID des Eingabefeldes ist.

alberner Weg:

onclick="javascript:CapacityChart();"

Sie sollten sich mit diskretem Javascript befassen und eine Frameworks-Bindungsmethode verwenden, um Rückrufe an dom-Ereignisse zu binden.