I'm actually working on this json received after an ajax call:
{
"1": {
"ONClick": "OpzioneUnoDellaDomandaUno",
"apre": [
"DomandaNumeroDueDelQuestionarioUno"
],
"chiude": [
"DomandaNumeroTreDelQuestionarioUno"
]
},
"2": {
"ONClick": "OpzioneDueDellaDomandaUno",
"apre": [
"DomandaNumeroTreDelQuestionarioUno"
],
"chiude": [
"DomandaNumeroDueDelQuestionarioUno"
]
},
"3": {
"ONClick": "OpzioneTreDellaDomandaUno",
"chiude": [
"DomandaNumeroDueDelQuestionarioUno",
"DomandaNumeroTreDelQuestionarioUno"
]
},
"4": {
"ONClick": "OpzioneQuattroDellaDomandaUno",
"chiude": [
"DomandaNumeroDueDelQuestionarioUno",
"DomandaNumeroTreDelQuestionarioUno"
]
},
"5": {
"ONClick": "OpzioneUnoDellaDomandaDue"
},
"6": {
"ONClick": "OpzioneDueDellaDomandaDue"
}
}
What ì'm trying to achieve is to give an onClick event to each IDOption and inside this onclick function i need to display the IDToOpen and hide the IDToClose. If i console.log the variables open or close outside the function click i get the whole object. But if i console log it inside the onclick function i think i only get the last one.
var dataJson = JSON.parse(data);
//console.log('Ramification: ', dataJson);
for (var key in dataJson) {
if (dataJson.hasOwnProperty(key)) {
var IDOption = document.getElementById(dataJson[key].ONClick);
var open = document.getElementById(dataJson[key].apre);
var close = document.getElementById(dataJson[key].chiude);
var IDToOpen = document.getElementById(open.id);
var IDToClose = document.getElementById(close.id);
console.log(IDToOpen); // i get the whole object
console.log(IDToClose); // i get the whole object
IDOption.addEventListener("click", function(){
console.log(IDToOpen); // i think i get the last one
console.log(IDToClose); // i think i get the last one
IDToOpen.style.display = 'flex';
IDToClose.style.display = 'none';
});
}
}