Esto es lo que tengo:
window.addEventListener("load",()=>{
var nomVre1 = new formLOGOSTariff("test-1", "test-atex-1", {key:12});
for (var key in nomVre1){
console.log(key);
console.log(nomVre1[key]);
}
var nomVre2 = new formLOGOSTariff("test-2", "test-atex-2", {key:34});
var nomVre3 = new formLOGOSTariff("test-3", "test-atex-3", {key:56});
var nomVre4 = new formLOGOSTariff("test-4", "test-atex-4", {key:78});
});
Y necesito obtener las {key:12,34,56,78} de cada uno. Ya he probado el resultado del for, pero me retorna todos los objetos utilizados en el JavaScript telacionado con text-1, y su contenido.
El problema es: ¿Cómo obtengo como valor esas key?
[EDIT]
Esto es el código Js completo:
class formLOGOSTariff{
constructor(id, idtxt, params){
var temCard = document.querySelector("#temp-card").innerHTML;
var temPower = document.querySelector("#temp-power").innerHTML;
var temEnergy = document.querySelector("#temp-energy").innerHTML;
var temForm = document.querySelector("#temp-form").innerHTML;
this.id = id;
this.idtxt = idtxt;
let foorm = document.createElement('div');
foorm.innerHTML = temForm;
document.getElementById(id).appendChild(foorm);
this.contentForm = foorm.querySelector(".content-form");
foorm.querySelector(".btn-event-addFrm").addEventListener("click",()=>{
this.addFrm();
});
foorm.querySelector(".btn-event-sndFrm").addEventListener("click", ()=>{
this.sndFrm();
});
foorm.querySelector(".btn-event-delFrm").addEventListener("click", ()=>{
this.delFrm();
});
let card = this.addFrm();
document.body.querySelector('.btn-event-sndTo').addEventListener("click", ()=>{
this.sndTo();
});
document.getElementById(this.idtxt).addEventListener("keyup", ()=>{
if (this.idtxt = ''){
} else{
this.sndTo();
}
});
}
addPower(el) {
var temPower = document.querySelector("#temp-power").innerHTML;
let power = document.createElement("div");
power.innerHTML = temPower;
el.querySelector(".container-power").appendChild(power);
power.querySelectorAll("input[name=t_power]").forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
power.querySelectorAll("input[name=v_power]").forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
return power;
}
addEnergy(el) {
var temEnergy = document.querySelector('#temp-energy').innerHTML;
let energy = document.createElement('div');
energy.innerHTML = temEnergy;
el.querySelector('.container-energy').appendChild(energy);
energy.querySelectorAll("input[name=t_energy]").forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
energy.querySelectorAll("input[name=v_energy]").forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
return energy;
}
addFrm() {
var tmp = document.querySelector('#temp-card').innerHTML;
var cont = this.contentForm;
let frm = document.createElement('div');
frm.innerHTML = tmp;
cont.appendChild(frm);
frm.querySelectorAll(".name_tarif").forEach(item=>{
item.addEventListener("keyup", ()=>{
this.sndFrm();
});
});
frm.querySelectorAll(".btn-event-addPower").forEach(item=>{
item.addEventListener("click", ()=>{
this.addPower(frm);
});
})
frm.querySelectorAll(".btn-event-addEnergy").forEach(item=>{
item.addEventListener("click", ()=>{
this.addEnergy(frm);
});
})
this.addPower(frm);
this.addEnergy(frm);
return frm;
}
sndFrm() {
var jotason = [];
this.contentForm.querySelectorAll(".templatecARD").forEach(form=>{
let obj = {
title : form.querySelector(".name_tarif").value
};
let power = {};
form.querySelectorAll("input[name=t_power]").forEach((inpt, index)=>{
var ob = power[index]||{};
ob.type=inpt.value;
power[index]=ob;
});
form.querySelectorAll("input[name=v_power]").forEach((inpt, index)=>{
var ob = power[index]||{};
ob.value=inpt.value;
power[index]=ob;
});
let energy = {};
form.querySelectorAll("input[name=t_energy]").forEach((inpt, index)=>{
var oj = energy[index]||{};
oj.type=inpt.value;
energy[index]=oj;
});
form.querySelectorAll("input[name=v_energy]").forEach((inpt, index)=>{
var oj = energy[index]||{};
oj.value=inpt.value;
energy[index]=oj;
});
obj.power = power;
obj.energy = energy;
jotason.push(obj);
})
var jsoned = JSON.stringify(jotason,undefined, 2);
document.getElementById(this.idtxt).value=jsoned;
}
sndTo(){
this.contentForm.innerHTML='';
let pJsn = document.getElementById(this.idtxt).value;
var dat = JSON.parse(pJsn);
for(let n in dat){
(form=>{
let formDv = this.addFrm();
formDv.querySelector(".container-power").innerHTML='';
for(let n1 in form.power){
(pow=>{
let power = this.addPower(formDv);
power.querySelector("[name=t_power]").value=pow.type;
power.querySelector("[name=v_power]").value=pow.value;
})(form.power[n1])
}
formDv.querySelector(".container-energy").innerHTML='';
for(let n2 in form.energy){
(eng=>{
let energy = this.addEnergy(formDv);
energy.querySelector("[name=t_energy]").value=eng.type;
energy.querySelector("[name=v_energy]").value=eng.value;
})(form.energy[n2])
}
formDv.querySelector(".name_tarif").value=form.title;
})(dat[n]);
}
}
delFrm(){
var nm = this.contentForm.getElementsByClassName("templatecARD").length -1;
var cont = this.contentForm.getElementsByClassName("templatecARD")[nm];
if (nm > 0){
if(confirm('¿Quieres borrarlo')){
cont.remove();
} else {}
} else {}
}
}
window.addEventListener("load",()=>{
var nomVre1 = new formLOGOSTariff("test-1", "test-atex-1", {key:111});
var nomVre2 = new formLOGOSTariff("test-2", "test-atex-2", {key:222});
var nomVre3 = new formLOGOSTariff("test-3", "test-atex-3", {key:333});
var nomVre4 = new formLOGOSTariff("test-4", "test-atex-4", {key:444});
});
formLOGOSTariff
?key
son pasadas a la clase en el constructor, es un argumentoparams
que se puede ver en él, pero no haces nada con ese argumento. Por ejemplo, si tuvieras un métodogetParams()
obtendrías los parámetros que le pasaste en el constructor. Creo que el problema es que estás planteando mal tu clase.