Использованный прототип объекта функции Javascript, обернутый во IIFE, определенный внутри DomContentLoaded в HTML, приводящий к ошибке - PullRequest
Новая
       58

Использованный прототип объекта функции Javascript, обернутый во IIFE, определенный внутри DomContentLoaded в HTML, приводящий к ошибке

0 голосов
/ 03 марта 2019

Я определил IIFE и внутри него определенный функциональный объект и его прототип, который обернут DomContentLoaded, но я не могу использовать его в HTML.Ниже приведен код в js-файле: 

const DomLoad = (function(){
function ChangeData() {
    this.active = 'blue-color';
}
ChangeData.prototype.change = function(imagename, idname, colorname) {
    document.getElementById(this.active).classList.remove("active");
    this.active = idname;
    document.getElementById(this.active).className += " active";   
    document.getElementById("text").innerHTML = colorname;            
    document.getElementById("carimage").src='assets/'+imagename+'.jpg';
};     
var changedata = new ChangeData();})();document.addEventListener("DOMContentLoaded", DomLoad);

Ниже приведен код в HTML-файле: 

<div class="color-circle" id="grey-color" onclick="changedata.change('grey','grey-color', 'Grey')"></div>

Выдает ошибку:

Ошибка типа:измененные данные не определены

Ответы [ 4 ]

0 голосов
/ 03 марта 2019

Ваш IIFE ничего не возвращает, поэтому DomLoad равно undefined.Также changeData является локальной переменной внутри IIFE, к ней нельзя получить доступ из встроенного обработчика событий.Вы должны сделать либо 

const changedata = (function(){
    function ChangeData() {
        this.active = 'blue-color';
    }
    ChangeData.prototype.change = function(imagename, idname, colorname) {
        document.getElementById(this.active).classList.remove("active");
        this.active = idname;
        document.getElementById(this.active).className += " active";   
        document.getElementById("text").innerHTML = colorname;            
        document.getElementById("carimage").src='assets/'+imagename+'.jpg';
    };     
    return new ChangeData();
});


<div class="color-circle" id="grey-color" onclick="changedata.change('grey','grey-color', 'Grey')"></div>

или 

function DomLoad(){
    function ChangeData() {
        this.active = 'blue-color';
    }
    ChangeData.prototype.change = function(imagename, idname, colorname) {
        document.getElementById(this.active).classList.remove("active");
        this.active = idname;
        document.getElementById(this.active).className += " active";   
        document.getElementById("text").innerHTML = colorname;            
        document.getElementById("carimage").src='assets/'+imagename+'.jpg';
    };     
    const changedata = new ChangeData();
    document.getElementById("grey-color").addEventListener("click", function(event) {
        changedata.change('grey','grey-color', 'Grey');
    });
}
document.addEventListener("DOMContentLoaded", DomLoad);


<div class="color-circle" id="grey-color"></div>
0 голосов
/ 03 марта 2019

Вы пытаетесь получить доступ к переменной, которая находится вне области видимости.Вы можете создать своего рода метод получения и вызвать его, чтобы получить доступ к «закрытой» переменной внутри IIFE.Что-то вроде: 

return {
  getChangedata: function() {
    return changedata;
  }
}

в конце вашего IIFE может работать.

Затем вы можете получить доступ к вашему change методу с помощью DomLoad.getChangedata().change().

0 голосов
/ 03 марта 2019

Это сработало для меня 

"use Strict";
(function(global){
function ChangeData() {
    this.active = 'blue-color';
}

ChangeData.prototype.change = function(imagename, idname, colorname) {
    document.getElementById(this.active).classList.remove("active");
    this.active = idname;
    document.getElementById(this.active).className += " active";   
    document.getElementById("text").innerHTML = colorname;            
    document.getElementById("carimage").src='assets/'+imagename+'.jpg';
};     

global.changedata = new ChangeData();
document.addEventListener("DOMContentLoaded", ChangeData,false);
})(window);
0 голосов
/ 03 марта 2019

Вы определяете и инициализируете changedata внутри IIFE, и, как вы знаете, переменные, объявленные внутри функции с использованием var, относятся только к этой функции и не видны за ее пределами.

Так что, когда выvar changedata = new ChangeData(); сделать это внутри IIFE, это не видно в глобальном контексте, и поэтому вы получаете TypeError: changedata is undefined.

Также еще одна проблема заключается в том, что вы присваиваете результат выполнения IIFE для DomLoadэто будет undefined, поскольку вы ничего не возвращаете, фактически это должна быть сама ссылка на функцию.

...