HTMLからクラスメソッドを呼び出す

-1

htmlのjavascriptクラスからメソッドを呼び出す方法は？HTMLからクラスメソッドを呼び出す

javascriptを使用してhtml生成コードからクラスメソッドを呼び出す方法が見つかりません。

私は理解しやすくするために小さな例を書いています。私は心のように来るすべてのものを試してみました

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

...

ONSTART（）
self.onStart（）
this.onStart（）
MyClassの。 onStart（）
MyClass.prototype.onStart（）
a.onStart
MyClass.onStart

出典

2016-04-11 magjakov

'onclickの= "ONSTART（）"' 'a.onStart（参照されていません）' – guest271314

onclick="onStart()"はa.onStart()を参照されていませんが、onStart()でthisはwindow.onStart()だろう。

あなたは要素がdocumentに追加された後#start要素にclickイベントを追加するinit()で#start要素に添付onclickイベント属性の.addEventListener()を置き換えることができます。

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

出典

2016-04-11 19:48:49 guest271314

-1

あなたはかなり簡単にbodyタグのloadイベントにバインドすることができます

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

すべてのHTMLがbodyタグにロードされるまで、それは待機しますが、それは文句を言わない他のを待ちます画像など

あなたが最初にかかわらず、準備する必要があります使用するので、head

に下からそのスクリプトタグを移動するオブジェクトなどのファイル

しかし、私はそのようなことを忘れてしまったと思う。ページが読み込まれたときではなく、ボタンがクリックされたときにイベントが発生するように思えます。あなたは要素を作成し、代わりに文字列を作成し、既存の要素のHTMLコンテンツを置き換えるの既存の要素に追加した場合、その場合には

、後に管理することが容易になるだろう：

<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

このメソッドでは、独自のボタンを持つクラスの複数のインスタンスを使用できます。

出典

2016-04-11 19:38:17 vahanpwns

（HTTP [HTML属性onevent' '使用しないでください。]：// stackoverflowの.com/a/35093997/3853934） –

質問はhtmlから関数を実行することでした。 'onevent'属性がこれを行う方法です。私は良い選択肢があることに同意しますが、一般的に質問に直接答えません。 – vahanpwns

愚かなことをどうやって作るのかという質問がある場合は、「しない」と答えて、代替案を提案してください。 –

-1

変更行：

  this.onStart = function onStart() {

はちょうど言うために：

 this.onStart = function() {

が、その後a.onStart（とそれを呼び出す）と、それが動作します。存在する場合はa.onStartされていない、

出典

2016-04-11 19:41:56 jimboweb

downvoteを説明しますか？私が知る限り、その人はonStart関数を呼び出す方法を尋ねられ、その質問に答えました。 – jimboweb

私はちょうどこれをテストし、それは動作します。なぜdownvote？ http://codepen.io/t3hpwninat0r/pen/GZQQBV注：ボタンには、クリック時に 'a.onStart（）'があります – vahanpwns

HTMLからクラスメソッドを呼び出す

答えて

関連する問題