How to use JavaScript onclick Functions with Array Index Values

Question

How to use JavaScript onclick Functions with Array Index Values

4.7k Views Asked by Hambone At 04 April 2025 at 23:33

I am currently using an onclick function in JavaScript to display information stored in an array depending on which element a user selects on. I then need another onclick function that allows me to do the same thing (display content based on selection) but based on an array index value that was selected. The first method works well because the user selection is based off an ID. I haven’t been successful with the second method because I haven’t figured out how to display content based off the selection of an array index value. Using JavaScript is strongly preferred for this project.

After choosing a major (the element labeled biology) the user would then select on one of the Job Titles, say “Genetic Counselor” stored in bioArray[1] [2], and the innerHTML of bioArray [4] and bioArray[5] would then display salary information unique to that Job Title. The information that I would be displaying would be stored in a separate array for each job title - ex: geneticCounselor []

My thoughts were by using nested arrays I may find a method that allows me to display content once selected that is based on the index value. So far, I have seen methods discussing event bubbling and “this” but do not believe these methods satisfy my requirements.

See JS Bin Demo: http://jsbin.com/dolucowuwu/edit?html,css,js,output

CSS:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>

<style>

h4 {
    border: 1px solid black;
    border-radius: 8px;
    padding: 10px 2px 10px 2px;
    margin: 20px 20px 0px 20px;
    background-color: #F0F0F0;
    border-color: #F8F8F8;
    color: #505050;
    cursor: pointer;
}

.active {
    background-color: #99E6FF;
}

p {
    font-size: 1.3em;
}

</style>

HTML:

<div class="container contentContainer">
    <div id="pTwoRowOne">
        <div class="row">
            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 row row-centered">
                <h4 id="bio" class="selected">Biology</h4>
            </div>
        </div>
    </div>
    <div id="pTwoRowTwo">
        <div class="row">
            <div class="row col-md-6">
                <h3 id="major" class="col-md-12 row row-centered">Select a major from above</h3>
                <h3 id="majorRep" class="col-md-12 row row-centered"></h3>
                    <p id="jobs" class="col-md-12 selectedTwo"></p>
                    <p id="skills"class="col-md-12"></p>
                    <p id="salaryRange" class="col-md-12"></p>
                    <p id="salaryRangeOC" class="col-md-12"></p>
                    <p id="salaryAvg" class="col-md-12"></p>
            </div>
        </div>
    </div>
</div>

JavaScript:

var H4 = document.getElementsByClassName("selected"), act;

[].forEach.call(H4, function(el){
    el.addEventListener("click", function(){
       if(act) act.classList.remove("active");
       return (this.classList.toggle("active"), act=this);
    });
});

var bioArray = [
    "Biology",
    ['Common Job Titles: Biological/Lab Technician',' Medical and Health Services Manager',' Genetic Counselor'],
    "Skills in Demand: Relevant Certifications and Degree Programs Required",
    "Major Salary Range: $35,000 to $120,000 +",
    "Occupation Salary Range: Select a Job Title",
    "Average Salary: Select a Job Title"

];

    document.getElementById("bio").onclick=function() {
    document.getElementById("majorRep").innerHTML = bioArray[0];
    document.getElementById("jobs").innerHTML = bioArray[1];
    document.getElementById("skills").innerHTML = bioArray[2];
    document.getElementById("salaryRange").innerHTML = bioArray[3];
    document.getElementById("salaryRangeOC").innerHTML = bioArray[4];
    document.getElementById("salaryAvg").innerHTML = bioArray[5];
}

var geneticCounselor = [
    "Occupation Salary Range: $45,000 to $90,000",
    "Average Salary: $57,000"
];

Original Q&A

There are 3 best solutions below

Maurício Araldi On 18 June 2015 at 17:33

You question could be better explained, but I think I've got your point. There are many ways to achieve what you want, and I see no reason why you wouldn't get any closer than what you've got (apart from being lazy =P ).

Anyway, let me try to help you.

You could be working with objects. They would make your life easier. So let's build an object for the jobs:

var jobs = {
    'geneticCounselor': {
        'jobName': 'Genetic Counselor',
        'occupationSalaryRange': '$45,000 to $90,000',
        'averageSalary': '$57,000'
    },
    'biologicalLabTechnician': {
        'jobName': 'Biological/Lab Technician',
        'occupationSalaryRange': '$00,000 to $00,000',
        'averageSalary': '$00,000'
    },
    //...Keep adding jobs
};

Now you have control over the information you want to handle. If you don't know JS objects, I suggest you reading this article. Now let's create our HTML accordingly to our objects:

document.getElementById("bio").addEventListener('click', function() {
  //Access each job in our object
  for (var key in jobs) {
    //get the job object reference
    var job = jobs[key];

    //Create a HTML element do display the information
    var p = document.createElement('p');

    //Creates a reference to keep track on our 'jobs' object
    p.setAttribute('data-job', key);

    //Set the text of the element
    p.textContent = job.jobName;

    //Add function to each job
    p.addEventListener('click', function() {
     //Retrieve the obj reference in the HTML element
     var dataJob = this.getAttribute('data-job');

     //Use the HTML element reference to get the OBJ reference, where the info is stored
     var job = jobs[dataJob];

     //Set the job info into the <p>
     document.getElementById('salaryRange').textContent = job.occupationSalaryRange;

     //Set the job info into the <p>
     document.getElementById('salaryAvg').textContent = job.averageSalary;
    });

    //Put the element on the page
    document.getElementById('jobs').appendChild(p);
}

So my full JS is:

var H4 = document.getElementsByClassName("selected"), act;

[].forEach.call(H4, function(el){
    el.addEventListener("click", function(){
       if(act) act.classList.remove("active");
       return (this.classList.toggle("active"), act=this);
    });
});

var jobs = {
    'geneticCounselor': {
        'jobName': 'Genetic Counselor',
        'occupationSalaryRange': '$45,000 to $90,000',
        'averageSalary': '$57,000'
    },
    'biologicalLabTechnician': {
        'jobName': 'Biological/Lab Technician',
        'occupationSalaryRange': '$00,000 to $00,000',
        'averageSalary': '$00,000'
    }
};

document.getElementById("bio").addEventListener('click', function() {
  //Access each job in our object
  for (var key in jobs) {
    //get the job object reference
    var job = jobs[key];

    //Create a HTML element do display the information
    var p = document.createElement('p');

    //Creates a reference to keep track on our 'jobs' object
    p.setAttribute('data-job', key);

    //Set the text of the element
    p.textContent = job.jobName;

    //Add function to each job
    p.addEventListener('click', function() {
     //Retrieve the obj reference in the HTML element
     var dataJob = this.getAttribute('data-job');

     //Use the HTML element reference to get the OBJ reference, where the info is stored
     var job = jobs[dataJob];

    //Set the job info into the <p>
    document.getElementById('salaryRange').textContent = job.occupationSalaryRange;

    //Set the job info into the <p>
    document.getElementById('salaryAvg').textContent = job.averageSalary;
    });

    //Put the element on the page
    document.getElementById('jobs').appendChild(p);
}
});

Be aware that there are other ways (and better ones) to achieve these type of results. You should read some stuff about HTML / DOM manipulation with JS to have a better knowledge.

Naveen.G On 15 October 2015 at 09:06

// Reform of datastructure.
var MainCategory = {
  'Biology': {
    'jobs': [' Biological/Lab Technician,', ' Medical and Health Services Manager,', ' Genetic Counselor'],
    'skills': 'Relevant Certifications and Degree Programs Required, Analysis, ANOVA, Attention to Detail, Analytical, Biological Data Collection, Data Entry, DNA Isolation/Sequencing',
    'salaryRange': '$335,000 to $120,000 +',
    'salary': '$35,000 to $120,000 +'
  },

  'Cartography': {
    'jobs': [' City Planner,', ' Natural Resource Manager,', ' Environmental Planner,', ' GIS Analyst,', ' GIS Specialist,', ' Cartographer'],
    'skills': 'Relevant Certifications and Degree Programs Required, ArcGIS Mapping Suite, Python Programming, Photogrammetry, Attention to Detail, Visual Basic/.NET',
    'salaryRange': '$40,000 to $115,000 +',
    'salary': '$35,000 to $120,000 +'
  }
};

var Jobs = {
  ' Biological/Lab Technician,': {
    'Salary': '$95,000 to $110,000',
    'AverageSalary': '$87,000'
  },
  ' Medical and Health Services Manager,': {
    'Salary': '$75,000 to $90,000',
    'AverageSalary': '$57,000'
  },
  ' Genetic Counselor': {
    'Salary': '$45,000 to $90,000',
    'AverageSalary': '$57,000'
  },
  ' City Planner,': {
    'Salary': '$775,000 to $90,000',
    'AverageSalary': '$57,000'
  }

};

// Get main element blocks
var mainSelect = $('#mainSelect');
var cart = $('#cart');
var details = $('#details');


// Put in main category info.
$.each(MainCategory, function(key) {
  var option = $('<h4>');
  option.text(key).data('category', key).appendTo(mainSelect);
})

// Define event handler
var showDetail = function(category) {
  var categoryData = MainCategory[category];

  // Do nothing if no detail info.
  if (typeof categoryData === 'undefined') {
    details.toggle(false);
    return;
  }
  details.toggle(true);
  // Put info to each detail element
  $.each(categoryData, function(key, value) {
    var info = details.find('#' + key);
    if (key === 'jobs') {
      // Create a selectable job list.
      info.children().remove();
      $.each(value, function(id, job) {
        var jobOption = $('<span>');
        jobOption.addClass('job').data('job', job).text(job).appendTo(info);
      });
    } else {
      info.find('span').text(value);
    }

  });

  // Set default display text for those job related info.
  details.find('.job-related span').text('Select a Job Title');
};
// 
var showJobDetail = function(job) {
  var jobInfo = Jobs[job],
    jobSalary, jobAverageSalary;
  if (typeof jobInfo === 'undefined') {
    details.find('.job-related span').text('Select a Job Title');
  } else {
    jobSalary = jobInfo.Salary ? jobInfo.Salary : 'Lack of info.';
    jobAverageSalary = jobInfo.AverageSalary ? jobInfo.AverageSalary : 'Lack of info.'
    details.find('#jobSalary span').text(jobSalary);
    details.find('#jobAverageSalary span').text(jobAverageSalary);
  }
}

// Setup events.
mainSelect.on('click', 'h4', function() {
  $(this).siblings('.active').removeClass('active');
  $(this).addClass('active');
  var category = $(this).data('category');
  showDetail(category);
});
// Bind events to job list.
details.on('click', 'span.job', function() {
  var job = $(this).data('job');
  showJobDetail(job);
});

h4 {
  border: 1px solid black;
  border-radius: 8px;
  padding: 10px 2px 10px 2px;
  margin: 20px 20px 0px 20px;
  background-color: #F0F0F0;
  border-color: #F8F8F8;
  color: #505050;
  cursor: pointer;
}
.active {
  background-color: #99E6FF;
}
p {
  font-size: 1.3em;
}
.fontIncrease {
  font-size: 1.2em;
  margin-bottom: 10px;
}
.pointerClass:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="mainSelect" class="selected"></div>
<div id="cart" class="selected"></div>
<div id="details" style="display:none">
  <div id="jobs" class="fontIncrease  pointerClass">
    Related Job Titles: <span></span>
  </div>
  <div id="skills" class="fontIncrease">
    Skills in Demand: <span></span>
  </div>
  <div id="salaryRange" class="fontIncrease">
    Major Salary Range: <span></span>
  </div>
  <div id="jobSalary" class='job-related fontIncrease'>
    Occupation Salary Range: <span></span>
  </div>
  <div id="jobAverageSalary" class='job-related fontIncrease'>
    Average Salary: <span></span>
  </div>
</div>

**fuyushimoya** · Accepted Answer

I've altered most of your data and web site to create a more maintainable example:

I choose to use a library called jquery, which can helps you a lot when manipulating dom elements and bind events.
Analyze your data, remove reusable words to html, and make the data structure more meaningful.
Add some class to control/listen to the target events more easily.

And below is what it become:

// Reform of datastructure.
var MainCategory = {
  'Biology': {
    'jobs': [' Biological/Lab Technician,', ' Medical and Health Services Manager,', ' Genetic Counselor'],
    'skills': 'Relevant Certifications and Degree Programs Required, Analysis, ANOVA, Attention to Detail, Analytical, Biological Data Collection, Data Entry, DNA Isolation/Sequencing',
    'salaryRange': '$335,000 to $120,000 +',
    'salary': '$35,000 to $120,000 +'
  },

  'Cartography': {
    'jobs': [' City Planner,', ' Natural Resource Manager,', ' Environmental Planner,', ' GIS Analyst,', ' GIS Specialist,', ' Cartographer'],
    'skills': 'Relevant Certifications and Degree Programs Required, ArcGIS Mapping Suite, Python Programming, Photogrammetry, Attention to Detail, Visual Basic/.NET',
    'salaryRange': '$40,000 to $115,000 +',
    'salary': '$35,000 to $120,000 +'
  }
};

var Jobs = {
  ' Biological/Lab Technician,': {
    'Salary': '$95,000 to $110,000',
    'AverageSalary': '$87,000'
  },
  ' Medical and Health Services Manager,': {
    'Salary': '$75,000 to $90,000',
    'AverageSalary': '$57,000'
  },
  ' Genetic Counselor': {
    'Salary': '$45,000 to $90,000',
    'AverageSalary': '$57,000'
  },
  ' City Planner,': {
    'Salary': '$775,000 to $90,000',
    'AverageSalary': '$57,000'
  }

};

// Get main element blocks
var mainSelect = $('#mainSelect');
var cart = $('#cart');
var details = $('#details');


// Put in main category info.
$.each(MainCategory, function(key) {
  var option = $('<h4>');
  option.text(key).data('category', key).appendTo(mainSelect);
})

// Define event handler
var showDetail = function(category) {
  var categoryData = MainCategory[category];

  // Do nothing if no detail info.
  if (typeof categoryData === 'undefined') {
    details.toggle(false);
    return;
  }
  details.toggle(true);
  // Put info to each detail element
  $.each(categoryData, function(key, value) {
    var info = details.find('#' + key);
    if (key === 'jobs') {
      // Create a selectable job list.
      info.children().remove();
      $.each(value, function(id, job) {
        var jobOption = $('<span>');
        jobOption.addClass('job').data('job', job).text(job).appendTo(info);
      });
    } else {
      info.find('span').text(value);
    }

  });

  // Set default display text for those job related info.
  details.find('.job-related span').text('Select a Job Title');
};
// 
var showJobDetail = function(job) {
  var jobInfo = Jobs[job],
    jobSalary, jobAverageSalary;
  if (typeof jobInfo === 'undefined') {
    details.find('.job-related span').text('Select a Job Title');
  } else {
    jobSalary = jobInfo.Salary ? jobInfo.Salary : 'Lack of info.';
    jobAverageSalary = jobInfo.AverageSalary ? jobInfo.AverageSalary : 'Lack of info.'
    details.find('#jobSalary span').text(jobSalary);
    details.find('#jobAverageSalary span').text(jobAverageSalary);
  }
}

// Setup events.
mainSelect.on('click', 'h4', function() {
  $(this).siblings('.active').removeClass('active');
  $(this).addClass('active');
  var category = $(this).data('category');
  showDetail(category);
});
// Bind events to job list.
details.on('click', 'span.job', function() {
  var job = $(this).data('job');
  showJobDetail(job);
});

h4 {
  border: 1px solid black;
  border-radius: 8px;
  padding: 10px 2px 10px 2px;
  margin: 20px 20px 0px 20px;
  background-color: #F0F0F0;
  border-color: #F8F8F8;
  color: #505050;
  cursor: pointer;
}
.active {
  background-color: #99E6FF;
}
p {
  font-size: 1.3em;
}
.fontIncrease {
  font-size: 1.2em;
  margin-bottom: 10px;
}
.pointerClass:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="mainSelect" class="selected"></div>
<div id="cart" class="selected"></div>
<div id="details" style="display:none">
  <div id="jobs" class="fontIncrease  pointerClass">
    Related Job Titles: <span></span>
  </div>
  <div id="skills" class="fontIncrease">
    Skills in Demand: <span></span>
  </div>
  <div id="salaryRange" class="fontIncrease">
    Major Salary Range: <span></span>
  </div>
  <div id="jobSalary" class='job-related fontIncrease'>
    Occupation Salary Range: <span></span>
  </div>
  <div id="jobAverageSalary" class='job-related fontIncrease'>
    Average Salary: <span></span>
  </div>
</div>

If you have question about the code, feel free to ask!

How to use JavaScript onclick Functions with Array Index Values

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ARRAYS

Related Questions in DOM

Related Questions in USER-INPUT

Related Questions in ONCLICKLISTENER

Trending Questions

Popular # Hahtags

Popular Questions