Rufen Sie eine Klassenmethode aus HTML

-1

Wie ruft man eine Methode aus der JavaScript-Klasse aus HTML?Rufen Sie eine Klassenmethode aus HTML

Ich finde keine Lösung für den Aufruf der Klassenmethode von HTML generierten Code mit Javascript.

Ich schreibe kleines Beispiel zum besseren Verständnis.

<head> 
    <script> 
     function MyClass() { 
      var self = this; 

      this.init = function() { 
      document.getElementById('list').innerHTML = this.mainTemplate(); 
      }; 

      this.mainTemplate = function() { 
       return '<button id="start" class="btn btn-danger btn-lg" onclick="onStart()" type="button"> value </button>'; 
      }; 

      this.onStart = function onStart() { 
       alert('bingo'); 
      }; 
     } 
    </script> 
</head> 
<body> 
    <div id ="list"> </div> 
     <script> 
      var a = new MyClass(); 
       a.init(); 
       //a.onStart(); 
     </script> 
</body>

Ich habe alles versucht, den Sinn kommt, wie ...

onStart()
self.onStart()
this.onStart()
MyClass. onStart()
MyClass.prototype.onStart()
a.onStart
MyClass.onStart

Quelle

2016-04-11 magjakov

'Onclick = "onStart()"' verweist nicht 'a.onStart()' – guest271314

onclick="onStart()" verweist nicht a.onStart(), aber this bei onStart() würde window.onStart() sein, die, wenn sie vorhanden ist nicht a.onStart.

Sie können .addEventListener() für onclick Ereignisattribut ersetzen bei init() an #start Element das click Ereignis #start Element hinzuzufügen, nachdem das Element document angehängt wurde.

<head> 
 
    <script> 
 
    function MyClass() { 
 
     var self = this; 
 

 
     this.init = function() {   
 
     document.getElementById('list').innerHTML = this.mainTemplate(); 
 
     // attach `click` event to `#start` here, 
 
     // set `this.onStart` as `click` handler function reference 
 
     document.getElementById("start").addEventListener("click", this.onStart) // or `self.onStart` 
 
     }; 
 

 
     this.mainTemplate = function() { 
 
     return '<button id="start" class="btn btn-danger btn-lg" ' 
 
       + 'type="button"> value </button>'; 
 
     }; 
 

 
     this.onStart = function onStart() { 
 
     alert('bingo'); 
 
     }; 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id="list"></div> 
 
    <script> 
 
    var a = new MyClass(); 
 
    a.init(); 
 
    </script> 
 
</body>

Quelle

2016-04-11 19:48:49 guest271314

-1

Sie auf den Load-Ereignis binden können body Tag ist ziemlich einfach:

<body onload="a.onStart()">

Es wird warten, bis die gesamte HTML im body-Tag geladen ist, aber es wird nicht für andere warten Dateien wie Bilder usw.

das Objekt, das Sie verwenden wollen, müssen jedoch zuerst vorbereitet werden, so dass die Script-Tag von unten in die head

bewegen

Allerdings glaube ich, ich habe den Punkt nicht verstanden. Offenbar möchten Sie, dass das Ereignis ausgelöst wird, wenn auf die Schaltfläche geklickt wird, nicht wenn die Seite geladen wird.

In diesem Fall wäre es einfacher, später zu verwalten, wenn Sie ein Element erstellen und an einem vorhandenen Element anhängen, anstatt einen String zu erstellen und ersetzen den HTML-Inhalt eines vorhandenen Elements:

<script> 
    function MyClass() { 
     var self = this; 

     this.init = function() { 
      document.getElementById('list').appendChild(this.mainTemplate()); 
     }; 

     this.mainTemplate = function() { 
      button = document.createElement('button'); 
     // button.id = "start"; 
      button.className = "btn btn-danger btn-lg"; 
      button.type = "button"; 
      button.innerHTML = " value "; 
      button.addEventListener("click", this.onStart); 

      return button; 
     } 
     this.onStart = function() { 
      alert('bingo'); 
     }; 
    } 

    </script> 
    <div id ="list"> </div> 
    <script> 
     var a = new MyClass(); 
      a.init(); 
     // a.onStart(); 
    </script>

http://codepen.io/t3hpwninat0r/pen/ONQQBP

Diese Methode ermöglicht mehrere Instanzen der Klasse mit ihrer eigenen Schaltfläche.

Quelle

2016-04-11 19:38:17 vahanpwns

(http [Verwenden Sie keine 'onevent' HTML-Attribute.]: // Stackoverflow .com/a/35093997/3853934) –

Die Frage war, die Funktion von HTML auszuführen. 'onevent' Attribute sind der Weg dies zu tun. Ich stimme zu, dass es bessere Alternativen gibt, aber im Allgemeinen beantworten sie die Frage nicht direkt. – vahanpwns

Wenn eine Frage stellt, wie man etwas Dummes macht, sollte man einfach "nicht" sagen und eine Alternative vorschlagen. –

-1

Ändern Sie die Zeile:

  this.onStart = function onStart() {

nur sagen:

 this.onStart = function() {

es dann mit a.onStart() aufrufen und es wird funktionieren.

Quelle

2016-04-11 19:41:56 jimboweb

Erklären Sie den Downvote? Soweit ich das beurteilen kann, fragte die Person, wie man die onStart-Funktion aufruft und beantwortete diese Frage. – jimboweb

Ich habe das gerade getestet und es funktioniert. Warum der Downvote? http://codepen.io/t3hpwninat0r/pen/GZQQBV Hinweis: Die Schaltfläche hat 'a.onStart()' beim Klicken – vahanpwns

Rufen Sie eine Klassenmethode aus HTML

Antwort

Verwandte Themen