JavascriptのコールイベントコンテンツHTMLを作成

Question

これは私のコードです：私はこのコードを実行すると、ボタン、起こるために何をクリックすると

// main.js 
    var component = { 
     create: function() { 
      var element = document.getElementById('app'); 
      element.innerHTML = this.render(); 
     }, 
     render: function() { 
      return '<button onclick="this.showMessage">Click me!</button>'; 
     }, 
     showMessage: function() { 
      alert('Hello world'); 
     } 
    }; 
    component.create(); 

とのindex.html

<div id="app"></div> 

インチクリックしてボタンを押すとブラウザに「Hello world！」というメッセージが表示されます。どうすればいいですか？誰かが私を助けることができますか？ありがとうございます！！！！

Answer 1

2つの問題があります。

まず、関数の後に()を入れて関数を呼び出す必要があります。したがって、showMessage()である必要があります。

第2に、onclickハンドラでは、thisは、オブジェクトではなくクリックしたボタンです。オブジェクトを含む変数component.showMessage()を参照する必要があります。

var component = { 
 
    create: function() { 
 
    var element = document.getElementById('app'); 
 
    element.innerHTML = this.render(); 
 
    }, 
 
    render: function() { 
 
    return '<button onclick="component.showMessage()">Click me!</button>'; 
 
    }, 
 
    showMessage: function() { 
 
    alert('Hello world'); 
 
    } 
 
}; 
 
component.create();

<div id="app"></div>

Answer 2

HTMLは、特定のJavaScript呼び出しのコンテキストで解析されていないので、thisは、あなたのオブジェクトを参照しています。クリックされたDOM要素を参照します。言い換えると、グローバル変数を使用しない限り、innerHTMLを使用して求めていることを（簡単に）行うことはできません。ここでグローバル変数を使用する必要はありません。 （さらに、あなたはそれを参照して、showMessage機能を呼び出すことはありません。）

あなたが代わりにDOM APIを使用して要素を作成することができます。

var component = { 
    create: function() { 
     var element = document.getElementById('app'); 
     element.appendChild(this.render()); 
    }, 

    render: function() { 
     var btn = document.createElement('button'); 
     btn.appendChild(document.createTextNode('Click me!')); 
     btn.addEventListener('click', this.showMessage.bind(this)); 
     return btn; 
    }, 

    showMessage: function() { 
     alert('Hello world'); 
    } 
}; 
component.create(); 

See it run

あなたはまた、使用することができますDOM操作を簡単にするjQueryのようなライブラリ

var component = { 
    create: function() { 
     $('#app').append(this.render()); 
    }, 

    render: function() { 
     return $('<button>') 
      .text('Click me!') 
      .click(this.showMessage.bind(this)); 
    }, 

    showMessage: function() { 
     alert('Hello world'); 
    } 
}; 
component.create(); 

See it run