When trying to gather information from a user using a 2D array in Javascript, I am encountering an issue with passing the array from one function to another as an actual array rather than text. What am I doing wrong?
The specific array looks like this:
Title Category1 Category2 Category3
Category1 Apples Blue Eyes
Category2 Oranges Green Legs
Category3 Pairs Yellow Arms
Mango Gray
The goal is to display `Column1` first by showing the "Title" as text and the Categories as buttons. When a button is clicked, it should show the contents of that column. For example, clicking on Category3 should display Category3 as text and the options "Eyes", "Legs", and "Arms" as buttons.
The issue arises when passing the correct parameters in the `onclick` event. Using `nextStep(this,database)` does not work as expected. If I try `nextStep(this,\''+database+'\')`, it passes the database as text instead of an array.
Any suggestions on how to solve this problem?
The HTML structure is simply a div:
<div id="mainPage"></div>
The JavaScript code starts on page load:
window.addEventListener("load", starting, false);
function starting(){
var database = [[Title, Category1, Category2, Category3], [Category1,Apples,Blue,Eyes],[Category2,Oranges,Green,Legs],[Category3,Pairs,Yellow,Arms],[,Mango,Gray,]];
renderCategories(database,1);
}
function renderCategories(database, pos){
mainPage = document.getElementById("mainPage");
var catTitles = database[0];
var catTitle = catTitles[pos];
var allmainPage = database[2];
mainPage.innerHTML = '<div class="input-field col s12 m12"><h3>'+catTitle+'</h3></div>';
for(var i=0; i<allmainPage.length; i++){
var categoryListValue = allmainPage[i][pos];
if (categoryListValue !=""){
mainPage.innerHTML += '<div class="row"><button onclick="nextStep(this,database)" value="'+categoryListValue+'">'+categoryListValue+'</button></div>';
}
}
}
function nextStep(selection, database){
var selectedCat = selection.value;
alert(selectedCat);
var catTitles = database[0];
alert(catTitles);
}
window.addEventListener("load", starting, false);