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

Ich versuche, eine HTML-Schaltfläche zu verwenden, um eine JavaScript-Funktion aufzurufen.

Hier ist der Code:

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

Es scheint aber 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 unten links auf die Registerkarte Kapazität. Die Schaltfläche sollte eine Warnung erzeugen, wenn die Werte nicht geändert werden, und ein Diagramm erzeugen, wenn Sie Werte eingeben.

Es gibt einige 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 gibt eine Definition im HTML:

<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 an den Event-Handler angehängt wird:

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 geparst 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, was bedeutet, dass die Verwendung einer (der 2.) die andere (die 1.) außer Kraft setzt. Mit der 3. Methode können Sie beliebig viele Funktionen an denselben Event-Handler anhängen, auch wenn die 1. oder 2. Methode ebenfalls verwendet wurde.

Höchstwahrscheinlich liegt das Problem irgendwo bei Ihnen CapacityChart() Funktion. Nachdem Sie Ihren Link aufgerufen 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 ersetzen document.all mit document.getElementById. Allerdings müssen Sie danach immer noch das Skript reparieren, daher würde ich empfehlen, es zuerst in mindestens IE zum Laufen zu bringen, da alle Fehler, die Sie beim Ändern des Codes machen, um browserübergreifend zu funktionieren, noch mehr Verwirrung stiften könnten. 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 unaufdringlich 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 und die Art und Weise, wie Sie die Funktion über die Schaltfläche aufrufen, sehen korrekt aus.

Das Problem scheint in der CapacityCount Funktion. Ich erhalte diesen Fehler in meiner Konsole unter Firefox 3.5: „document.all is undefined“ in Zeile 759 von bendelcorp.js.

Bearbeiten:

Sieht aus wie document.all ist eine reine IE-Sache und eine nicht standardmäßige Methode für den Zugriff auf das DOM. Wenn du benutzt document.getElementById(), sollte wohl funktionieren. Beispiel: document.getElementById("RUnits").value anstatt document.all.Capacity.RUnits.value

Das sieht richtig aus. Ich vermute, 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

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

Es sollte also nur so aussehen: onclick="CapacityChart()"

dann sollte alles funktionieren 🙂

Ein großes Problem, das Sie haben, ist, dass Sie Browser-Sniffing ohne triftigen 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, also navigator.appName wird nicht sein Netscape. Unterstützt Chrome document.all? Vielleicht, aber vielleicht auch nicht. Und was ist mit anderen Browsern?

Die Version des Codes auf der Netscape branch sollte auf jedem Browser bis zurück zu Netscape Navigator 2 von 1996 funktionieren, also sollten Sie wahrscheinlich einfach dabei bleiben … außer dass es nicht funktioniert (oder nicht garantiert wird), weil Sie es nicht angegeben haben ein name Attribut auf der input Elemente, sodass sie nicht zu den Formularen hinzugefügt werden elements Array als benannte Elemente:

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

Geben Sie ihnen entweder einen Namen und verwenden Sie die elements Array, oder (besser) verwenden

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

die auf allen modernen Browsern funktioniert – keine Verzweigung erforderlich. Um auf der sicheren Seite zu sein, ersetzen Sie das Sniffing für eine Browserversion größer oder gleich 4 durch eine Überprüfung auf getElementById Unterstü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 treten, und es schlägt dort fehl. das sollte dir helfen das problem zu lösen.

Sie haben jquery referenziert. Sie können es genauso gut in all diesen Funktionen verwenden. Es wird Ihren Code erheblich bereinigen.