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

Lesezeit: 7 Minuten

Verwenden einer HTML Schaltflache zum Aufrufen einer JavaScript Funktion
Wald

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.

  • Bitte definieren Sie “scheint nicht richtig zu funktionieren”. Welche Fehlermeldung(en) erhalten Sie, wenn Sie darauf klicken?

    – nur jemand

    22. Dezember 2009 um 15:59 Uhr

  • Die Schaltfläche funktioniert in IE8, aber nicht in FF 3.5 aufgrund eines JavaScript-Fehlers (siehe Jeffs Antwort)

    – Chris schreit

    22. Dezember 2009 um 16:46 Uhr

  • Ja, es stellt sich heraus, dass document.all eine nicht standardmäßige IE-Sache ist; meine Antwort mit einer vorgeschlagenen Alternative aktualisiert.

    – Jeff

    22. Dezember 2009 um 16:50 Uhr

  • @paper1337, @Jeff: Die Funktion erzielt immer noch nicht den gewünschten Effekt in IE8, also wird selbst das Austauschen von document.all gegen document.getElementById das Problem nicht beheben.

    – Andi E

    22. Dezember 2009 um 19:48 Uhr

1646256131 449 Verwenden einer HTML Schaltflache zum Aufrufen einer JavaScript Funktion
Andi E

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.

  • Mit jquery gibt es auch: $("#clickMe").bind('click', function () { alert('hello!'); };)

    – Römisch

    22. Mai 2014 um 13:28 Uhr


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

  • Einverstanden. In vielen Fällen sind jQuery und andere Frameworks für kleine Mengen an Javascript ein reiner Overkill, und nicht der gesamte Javascript-Code muss browserübergreifend sein.

    – Andi E

    22. Dezember 2009 um 16:11 Uhr

  • Fair genug … der Punkt, den ich machen wollte, war “ein besserer Weg, dies zu tun” ist unauffällig … Ohne jQuery, so etwas wie: var btn = document.getElementById(‘MyButton’); btn.onclick = function(){CapacityChart();}

    – Paulus

    22. Dezember 2009 um 16:21 Uhr

  • Diese Leute, die jQuery verwenden, scheinen darauf eingestellt zu sein, es für alles Web zu verwenden. Wie wäre es mit einem flachen JavaScript? Meine Güte, jQuery geht mir jetzt wirklich auf die Nerven. LOL! Ich nenne es die Art des faulen Mannes, ein Web zu erstellen, denn ich denke, das ist alles, was es wirklich ist.

    – DoctorLouie

    22. Dezember 2009 um 22:16 Uhr

  • @DrLouie: Ich habe überhaupt nichts gegen jQuery, es ist eine gute Lösung für viele Probleme, aber wenn es nicht vom OP markiert oder gefragt wird, sollte jede Erwähnung von jQuery auch durch eine Nicht-jQuery-Methode unterstützt werden, sonst laufen sie Gefahr a) den Fragesteller zu verwirren – er weiß vielleicht nicht, was jQuery ist, oder b) den Fragesteller zu ärgern, indem er ihm sagt, er solle jQuery für ein paar Zeilen Javascript-Code verwenden. @Paul – Ich muss sagen, das war keine großartige Lektüre …

    – Andi E

    23. Dezember 2009 um 10:25 Uhr

  • Entschuldigung … falscher Link gepostet – soll einen Stackoverflow posten. stackoverflow.com/questions/1588374/…

    – Paulus

    23. Dezember 2009 um 16:32 Uhr

Verwenden einer HTML Schaltflache zum Aufrufen einer JavaScript Funktion
Jeff

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 ist nicht speziell das Problem mit der Funktion, die im IE keine Fehler auslöst

    – Andi E

    22. Dezember 2009 um 19:45 Uhr

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

1646256133 479 Verwenden einer HTML Schaltflache zum Aufrufen einer JavaScript Funktion
Jäcki

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 🙂

1646256134 221 Verwenden einer HTML Schaltflache zum Aufrufen einer JavaScript Funktion
NickFitz

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.

1646256134 904 Verwenden einer HTML Schaltflache zum Aufrufen einer JavaScript Funktion
Patricia

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.

  • Es scheitert jedoch nicht im IE in dieser Zeile.

    – Andi E

    22. Dezember 2009 um 19:45 Uhr

  • weil document.all ein IE-Ding ist. er sollte nur die jquery-Notation $(‘#RUints’).val() verwenden, b/c er schließt jquery bereits ein. dies kümmert sich um Browser-Unterschiede und bereinigt den Code.

    – Patricia

    23. Dezember 2009 um 19:34 Uhr

916250cookie-checkVerwenden einer HTML-Schaltfläche zum Aufrufen einer JavaScript-Funktion

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy