HTML und Javascript verbinden

[Saheeda]

Hallo,

vorweg: Ich bin blutiger Anfänger und grad beim Basteln und Experimentieren. Wenn das ne doofe Frage ist, entschuldige ich mich dafür.

Ich möchte eine JS-Funktion mittels Button aufrufen.

Ich weiß, wie ich die Funktion in JS aufrufe, und mir das Ergebnis in HTML anzeigen lassen kann:
document.getElementById('input').innerText="Text";

object.sayFunction();

aber wie geht das andersherum? Wie sage ich HTML, dass ich exakt diese Funktion für exakt dieses Objekt ausgeführt haben möchte?

Mein Button sieht bisher so aus:

<input type = "button" name="name" value ="Klickmich"
onclick = "this.sayFunction()">

Das Script selbst ist in einer externen style.js-Datei und mittels script-Tag verlinkt.

 

[ComFreek]

Hallo Saheeda und willkommen im Forum!

Was funktioniert denn nicht genau?
this.sayFunction() kann eigentlich nicht funktionieren, da this sich auf das DOM-Objekt (=Button) selber bezieht. D. h. sofern du nicht selbst das DOM-Objekt verändert hast, wird das darauf hinauslaufen, dass sayFunction unbekannt ist und deswegen ein Fehler generiert wird (siehe Entwicklerkonsole deines Browsers).

Dass du eine externe JS-Datei hast, ist schon einmal gut! Dann möchte ich dir gerne auch einen besseren Weg beibringen, wie du auf Events (in deinem Fall: das Klick-Event) reagieren kannst:

function reagiere() {
  // Mach was
}

// Du musst deinem Button noch eine ID verpassen
// Oder du gehst über das name-Attribut, es gibt hier viele Wege...
document.getElementById('deine-button-id').addEventListener('click', reagiere);

Ich möchte dich zusätzlich bitten, Code-Tags zu verwenden: [code=Programmiersprache]Dein Code[/code]

Edit: Code oben korrigiert, siehe Beitrag unter diesem von Quaese.

 

[Quaese]

Hi,

kleine Korrektur:

Laut ECMAScript ist das erste Argument der addEventListener-Methode der Typ (click, mouseover usw).

addEventListener(type, listener, useCapture)

Ciao
Quaese

 

[Saheeda]

@Quaese

danke, für die Antwort. Aber irgendwas mache ich verkehrt, es passiert ... rein garnichts.

Ich habe probiert, meine Funktion in den EventListener einzubetten (s.u.) und sie nur über Machwas(); im Listener aufzurufen.


Ich habe eine Funktion MachWas, wenn ich diese über Objekt.MachWas aufrufe, bekomme ich den Text in einem Absatz angezeigt. Diese Funktion möchte ich jetzt über einen Button von HTML aus aufrufen können:

document.getElementById('Button').addEventListener('click',
                 this.MachWas=function(){
                 var machwas = this.machwas;
                    switch(true){
                         [.....]
                  }
);

 

[ComFreek]

Dein Code kann so nicht funktionieren, da am Ende vor der runden noch eine geschweifte Klammer fehlt.
Ansonsten sollte dein Code funktionieren.

Dein Code mal etwas aufgehübscht:

document.getElementById("Button").addEventListener("click", this.MachWas = function() {
  var machwas = this.machwas;
  switch (true) {
    // ...
  }
});

 

[AlanHorman]

Habe ein ähnliches Problem. Ich habe in einer HTML-Datei einen externen JavaScript eingebunden mit
$.getScript('js/datei.js');, aber ich kann in dieser HTML-Datei keine Funktionen aufrufen aus der datei.js.

Woran kann sowas liegen, dass es nicht geht?

Den jQuery-Source-Code habe ich auch eingebunden.

 

[ComFreek]

@AlanHorman Ich vermute, dass du nicht wartest, bist das Skript vollständig geladen ist. Aber bitte mach doch einen neuen Thread im JavaScript & AJAX Forum auf, zusammen mit deinem Code.