Блог

Главная - Вопросы по программированию - Моя функция из js-файла не вызывается из html-файла

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

#javascript #css #node.js #html

#javascript #css #node.js #HTML

Вопрос:

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

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

Я только что добавил консольный оператор в функцию :

 getSpeechBubble: function() {

        console.log(' getSpeechBubble ');
}

Комментарии:

1. И как вы это вызываете? Также, пожалуйста, правильно отформатируйте код

2. Как вы вызываете функцию? Как вы включаете JS-файл? Вы уверены, что это не кэширование? Есть ли какие-либо ошибки в консоли? Вы пробовали ее отлаживать?

3. HTML недопустим, а JS не зависит от того, как вы его объявили

4. Что происходит, когда вы добавляете кавычки здесь и > <div id ="bubble" class="bubble-style" data-action="getSpeechBubble()"></div> ?

5. @vlaz Я вызываю функцию, используя тег «data-action». Нет, это не кэширование. Если я добавлю тег img в свой div и добавлю изображение, я смогу это увидеть, но я не нахожу свою консольную инструкцию.

Ответ №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();