Global array issues and sending json data

  var x = document.getElementsByTagName('button');//return button array
        //arrays
       var entry_age = [];//age
       var entry_relation = [];//relation 
       var entry_smoker = [];//smoker

    //add button clicked
    x[0].addEventListener("click", function(){

       var age = document.getElementsByName("age")[0].value;//pull age from box
       var relation = document.getElementsByName("rel")[0].value;//pull relation
       let smoker = document.querySelector('[name=smoker').checked;

       //check relation 
       if(relation === "")
       {
           alert("please select a realation"); 
       }

       //check to see if age < 0
       if(age < 0 || age === " ")
       {
           alert("age not applicable");
       }



       //add data to arrays
       entry_age.push(age);
       entry_relation(relation);
       entry_smoker(smoker);

       alert(entry_age[0]);

    });

    x[1].addEventListener("click", function(){
       var age = JSON.stringify(entry_age);
       alert(entry_age[1]);
       document.getElementbyClassName("debug").innerHTML = JSON.stringify(entry_relation);
       document.getElementByClass("debug").innerHTML = JSON.stringfy(entry_smoker);
});

      

        
        
        
      

    

I am trying to store a value at the age of age dynamically and convert it to JSON and display it only that I cannot get the data to store in an array, how do I make the array work globally? At the moment I am sure that this is my array, but I still see something wrong in the JSON. For debugging purposes, I used the warning with the array index, and the second in the second as unidentified. This is back to the pre-tag with the class name debug. You guys helped me a lot on this project thanks to the advanced promotion.