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

有兩個問題。

首先，你需要在函數後面加上()來調用函數，所以它應該是showMessage()。

其次，在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

您也可以使用一個像jQuery這樣的庫，使DOM操作更容易。

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