HTML'den bir sınıf yöntemini çağırın.

-1

Javascript sınıfından html'den bir yöntem nasıl çağrılır?HTML'den bir sınıf yöntemini çağırın.

javascript kullanarak html tarafından oluşturulan koddan çağrı sınıfı yöntemi için çözüm bulamıyorum.

Daha iyi anlamak için küçük bir örnek yazıyorum. Aklımda gibi geliyor her şeyi denedim

<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()
Sınıfım. onStart()
MyClass.prototype.onStart()
a.onStart
Oldukça kolay body etiketinin yük olaya bağlayabilir

kaynak

2016-04-11 magjakov

'onclick = "onStart()"' ' – guest271314

onclick="onStart()" eğer varsa a.onStart değil window.onStart() olacağını onStart() de a.onStart() ancak this başvurmuyor.

Sen eleman document eklenen sonra #start elemana click olay eklemek için init() de #start elemana bağlı onclick olay özelliği için .addEventListener() yerine kullanabilirsiniz.

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

kaynak

2016-04-11 19:48:49 guest271314

-1

MyClass.onStart: tüm HTML body etiketinde yüklenene kadar

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

O bekleyecek ama alışkanlık diğer beklemek görüntülerin vb

ilk olsa hazırlanmalıdır kullandığından, head

içine alttan o komut dosyası etiketi taşımak istediğiniz nesne gibi dosyalar

Ancak, sanırım bu noktayı kaçırdım. Bu, sayfa yüklendiğinde değil, düğmeye tıklandığında olayın tetiklenmesini istediğiniz gibi görünüyor.

<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: Bir element oluşturmak ve var olan bir elemanın html içeriği bir dize oluşturma ve değiştirme varolan elemana bunu yerine ekler eğer Bu durumda

, daha sonra yönetmek daha kolay olurdu

Bu yöntem, kendi düğmelerine sahip sınıfın birden fazla örneğine izin verir.

kaynak

2016-04-11 19:38:17 vahanpwns

a.onStart()' başvurmuyor (http [HTML özelliği onevent' 'kullanmayın.]: // stackoverflow .com/a/35093997/3853934) –

Soru, işlevi html'den çalıştırmaktı. 'onevent' öznitelikleri bunu yapmanın yoludur. Daha iyi alternatifler olduğuna katılıyorum, ancak genellikle doğrudan soruyu cevaplamıyorlar. – vahanpwns

Bir soru nasıl aptalca bir şey yapılacağını sorarsa, sadece "yapma" diyelim ve bir alternatif önermelisiniz. –

-1

değiştirme hattı:

  this.onStart = function onStart() {

sadece söylemek:

 this.onStart = function() {

sonra a.onStart ile diyoruz() ve işe yarayacak.

kaynak

2016-04-11 19:41:56 jimboweb

İndirgemeyi açıkla? Anlayabildiğim kadarıyla, kişi onStart işlevini nasıl arayacağımı sordu ve ben bu soruya cevap verdim. – jimboweb

Sadece bunu test ettim ve işe yarıyor. neden düşüş http://codepen.io/t3hpwninat0r/pen/GZQQBV not: düğmenin 'a.onStart() 'tıklaması vardır – vahanpwns

HTML'den bir sınıf yöntemini çağırın.

cevap

İlgili konular