1
Reformulated question: I’m trying to create a dialog for the user, but I’m having an error described as Uncaught TypeError: Cannot read property 'style' of undefined
when I click the button Close generated by the code.
Jsfiddle: https://jsfiddle.net/jh3funk2/
The code is this:
/** Dialog **/
var Dialog = function(name, width)
{
// Cria frame do dialog
var dlgFrame = document.createElement('div');
dlgFrame.id = name;
dlgFrame.style.display = 'none';
dlgFrame.setAttribute("data-dialog", name);
// Cria o container para os componentes
var dlgContainer = document.createElement('div');
dlgContainer.style.width = width;
dlgContainer.setAttribute("data-dialog-width", width);
// Cria espaço para o título
var dlgTitle = document.createElement('div');
dlgTitle.setAttribute("data-dialog-title", name);
// Cria espaço para os botões
var dlgButton = document.createElement('div');
dlgButton.setAttribute('data-dialog-buttons', name);
// Monta os componentes
dlgContainer.appendChild(dlgTitle);
dlgContainer.appendChild(dlgButton);
dlgFrame.appendChild(dlgContainer);
document.body.appendChild(dlgFrame);
// Cria as variáveis
this.dlg = document.querySelector('[data-dialog="'+name+'"]');
this.title = document.querySelector('[data-dialog-title="'+name+'"]');
this.buttons = document.querySelector('[data-dialog-buttons="'+name+'"]');
}
Dialog.prototype.show = function(display)
{
this.dlg.style.display = display || "flex";
};
Dialog.prototype.close = function()
{
this.dlg.style.display = 'none';
};
Dialog.prototype.setTitle = function(title)
{
this.title.innerHTML = title;
}
Dialog.prototype.addButton = function(text, callback)
{
// Cria os elementos
var button = document.createElement('button');
var text = document.createTextNode(text);
// Define o texto e o evento
button.appendChild(text);
button.addEventListener("click", function()
{
// todo: verificação do typeof
callback();
});
this.buttons.appendChild(button);
}
/** Controlador **/
appController = function()
{
this.confirmarSaida;
};
appController.prototype.init = function()
{
this.confirmarSaida = new Dialog('confirmarSaidaDlg', '10vw');
this.confirmarSaida.setTitle('Deseja sair do sistema?');
this.confirmarSaida.addButton('Fechar', this.confirmarSaida.close);
this.confirmarSaida.show();
};
window.onload = function()
{
appController = new appController();
appController.init();
};
I have tested the following solutions, but they have not worked:
- https://stackoverflow.com/questions/5490448/how-do-i-pass-the-this-context-into-an-event-handler
- https://stackoverflow.com/questions/1803195/addeventlistener-and-the-scope-of-this
I don’t intend to use any library, it’s a code for learning.
How to make the dialog close with the function by clicking the button close
? Remember that I will also pass other callbacks to the button, not only the this.close()
;
While executing your code I did not get the error you reported, I got the following error, Uncaught Typeerror: this.confirmaSaida.setTitle is not a Function(...), this did not happen to you either?
– Leonardo Villela
The methods are missing setTitle and setButton;
– Guilherme Lautert
Checking I noticed that there is a property called this dlg., what would be generating this error. You should define it. I believe it is
this.dlg = dlgFrame
, but you must check– Guilherme Lautert
You’re right, I forgot most of the code when passing to Stackoverflow, I’ll modify the question, thank you.
– Renan Cavalieri
I’m voting to close, not to generate hypothetical answers, until it can be reopened with the real situation.
– Guilherme Lautert
@Guilhermelautert the question is already corrected.
– Renan Cavalieri