Моя функция из js-файла не вызвана из html-файла

Question

Я работаю над сайтом, который использовал узел js. Я добавил функцию в файл js. Теперь, когда я пытаюсь вызвать функцию с html-страницы, функция не вызывается. Это код, который я использовал в HTML-странице:

<div id ="bubble" class="bubble-style" data-action="getSpeechBubble()</div> 

Я просто добавил консольное заявление в функции:

getSpeechBubble: function() { 

     console.log(' getSpeechBubble '); 
} 

Answer 1

Существует несколько способов создания и вызывают функции, наиболее популярные используемое ниже

function getSpeechBubble(){ 
 
console.log("getSpeechBubble"); 
 
} 
 
//get function from data-action attribute 
 
var exc = document.getElementById("bubble").getAttribute("data-action"); 
 

 
//or window.addEventListener("load",new Function(exc),false); 
 
window.onload = new Function(exc); 
 
//or .addEventListener("clik",new Function(exc),false); 
 
document.getElementById("bubble").onclick = new Function(exc);

<div id ="bubble" class="bubble-style" data-action="getSpeechBubble()"> 
 
click me 
 
</div>

//1st way 
this.getSpeechBubble = function() { 
      console.log(' 1st way: getSpeechBubble '); 
} 
this.getSpeechBubble(); 
//2nd way 
this["getSpeechBubble"] = function() { 
      console.log(' 2nd way: getSpeechBubble '); 
} 
this["getSpeechBubble"](); 
//3rd way 
window["getSpeechBubble"] = function() { 
      console.log(' 3rd way: getSpeechBubble '); 
} 
window["getSpeechBubble"]() 
//4th way 
var getSpeechBubble = function() { 
      console.log(' 4th way: getSpeechBubble '); 
} 
getSpeechBubble(); 
//5th way 
var js = { 
getSpeechBubble: function(){ 
      console.log(' 5th way: getSpeechBubble '); 
} 
}; 
js.getSpeechBubble(); 
//6th way 
function getSpeechBubble() { 
      console.log(' 6th way: getSpeechBubble '); 
} 
getSpeechBubble();