0

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';

                        }); 
  
                }


            }
Aogiri14
  • 65
  • 10
  • Just a naming advice: you parse json data and get an object. So I'd swap the variable names so that it would read `const data = JSON.parse(dataJson)`. Makes it easier to understand. – Andreas Dolk Aug 10 '22 at 10:09
  • Closed to fast - so I help here: (1) replace `var` with `const` to sort out side effects of the old `var`. And stop using `var` at all. (2) Then: `apre` and `chiude` are arrays. And not always present. So add some null/undefined checks to the handler method. (3) Also - you have bad names for the html elements (`IDOption` for example). They are not 'ids'. – Andreas Dolk Aug 10 '22 at 10:20
  • @AndreasDolk thx i will care more about naming and sure use your advices. Still struggling with new javascript. In the end the linked question they gave me worked. I tried hard but worked. – Aogiri14 Aug 10 '22 at 13:19

0 Answers0