How can I execute the action assigned by each button According to the id of each one. I don't know if I explain myself.
Ex: The button of Modal2 Button2
del Titulo del Modal 2
must execute the function action: function () {alert('Modal2 Button2');}
instead of that it executes the last cycle that I executed when loading the code at the beginning that was of the buttonModal3 Button2
var jQ = false;
if (typeof $ != 'function' && jQ == false) {
window.$ = function(id) {
return document.querySelector(id);
}
}
if (jQ == false) {
Element.prototype.settings = function(settings) {
SmEl = this;
option = settings;
ct();
};
}
function ct() {
if (option.buttons != undefined) {
b = option.buttons ? option.buttons : "";
Object.keys(b).forEach(function(key, btn) {
if (b[key] != undefined) {
if (b[key] != "") {
Btns = document.createElement("BUTTON");
Btns.classList.add("Btn");
Btns.classList.add([key]);
BtnsNode = document.createTextNode(b[key].name);
Btns.appendChild(BtnsNode);
Btns.onclick = function(){
b[key].action();
};
SmEl.querySelector(".Modal-Footer").appendChild(Btns);
}
}
});
}
}
$("#Modal1").settings({
buttons: {
accept: {
name: "Modal1 Button1",
action: function () {
alert('Modal1 Button1');
}
},
cancel: {
name: "Modal1 Button2",
action: function () {
alert('Modal1 Button2');
}
},
custom: {
name: "Modal1 Button3",
action: function () {
alert('Modal1 Button3');
}
}
}
});
$("#Modal2").settings({
buttons: {
accept: {
name: "Modal2 Button1",
action: function () {
alert('Modal2 Button1');
}
},
cancel: {
name: "Modal2 Button2",
action: function () {
alert('Modal2 Button2');
}
},
custom: {
name: "Modal2 Button3",
action: function () {
alert('Modal2 Button3');
}
}
}
});
$("#Modal3").settings({
buttons: {
accept: {
name: "Modal3 Button1",
action: function () {
alert('Modal3 Button1');
}
},
cancel: {
name: "Modal3 Button2",
action: function () {
alert('Modal3 Button2');
}
},
custom: {
name: "Modal3 Button3",
action: function () {
alert('Modal3 Button3');
}
}
}
});
<div class="Modal-Container" id="Modal1">
<div class="Modal Drop">
<div class="Modal-Head">Titulo del Modal 1</div>
<div class="Modal_Body"></div>
<div class="Modal-Footer"></div>
</div>
</div>
<div class="Modal-Container" id="Modal2">
<div class="Modal Drop">
<div class="Modal-Head">Titulo del Modal 2</div>
<div class="Modal_Body"></div>
<div class="Modal-Footer"></div>
</div>
</div>
<div class="Modal-Container" id="Modal3">
<div class="Modal Drop">
<div class="Modal-Head">Titulo del Modal 3</div>
<div class="Modal_Body"></div>
<div class="Modal-Footer"></div>
</div>
</div>
In the function
ct()
you are working only with the objects, not with the elements. When the code enters that function,b
it is the last object allocated in its scope (the last one in the iteration). Instead, you should assign the element's object, not the object itself.You could give the code a spin and simplify it, but the quick fix is to pass the element to the function
ct()
, that way you'll correctly assign the event to the function inside the element's object in question.Here is the working example .
Here is a more simplified code example