By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,607 Members | 1,931 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,607 IT Pros & Developers. It's quick & easy.

How to refer to variables for arrays by concatenating a numeric value?

beacon
100+
P: 579
Hi,

Let me start off by saying that 1) I'm still learning Javascript and 2) I'm limited to creating web pages as html files on a network instead of on a web server.

With that in mind, I'm trying to come up with a solution that will allow a department to edit a Javascript file to enter values that will be inserted into an HTML file when it loads. The department will be entering FAQ questions and answers into arrays in separate Javascript files.

I've gotten this to work by, as I mentioned, creating two files, one for questions and one for answers. Each file has a single array with code similar to the following:
Expand|Select|Wrap|Line Numbers
  1. var questions0 = new Array(
  2.  
  3. "Why is the sky blue?",
  4. "Which way is up?",
  5. "Where's Waldo?",
  6.  
  7. );
  8.  
And the following:
Expand|Select|Wrap|Line Numbers
  1. var answers = new Array(
  2.  
  3. "Because I said so.",
  4. "That way.",
  5. "In the restroom.",
  6.  
  7. );
  8.  
In the HTML file, I have two Javascript functions that call the Javascript files holding the arrays and add some html formatting to print them to the screen:
Expand|Select|Wrap|Line Numbers
  1. function QuestionsFAQ()
  2. {
  3.     var questionIndex = 0;
  4.     var counter;
  5.  
  6.     document.write('<h2 class="titlebar">&iquest; Questions ?</h2>')
  7.     document.write('<p class="notice">Please select from one of the following questions:</p>')
  8.     document.write('<ul type="disc">')
  9.  
  10.     for(counter = 0; counter < questions.length; counter++)
  11.     {
  12.         if(questionIndex == questions.length) { return; }
  13.  
  14.         document.write('<li><a href="#topic' + (counter + 1) + '">' + questions[questionIndex] + '</a></li>')
  15.             questionIndex++;
  16.     }
  17.  
  18.     document.write('</ul>')
  19. }
  20.  
  21. function AnswersFAQ() 
  22. {
  23.     var questionIndex = 0;
  24.     var answerIndex = 0;
  25.     var counter;
  26.  
  27.     document.write('<h2 class="titlebar">&iexcl; Answers !</h2>')
  28.  
  29.     for(counter = 0; counter < answers.length; counter++)
  30.     {
  31.         if (answerIndex == answers.length) { return; }
  32.  
  33.         document.write('<a name="topic' + (counter + 1) + '"><font class="answers">' + questions[questionIndex] + '&nbsp&nbsp</font></a>')
  34.         document.write('<a class="return" href="#top">Return to top</a><br />')
  35.             document.write(answers[answerIndex])
  36.         document.write('<br /><br/>')
  37.                 questionIndex++;
  38.                 answerIndex++;
  39.     }
  40. }
  41. </script>
  42.  
However, the department reorganized the FAQ questions and answers and create sections/categories of questions, and wanted this to appear on the page too. Since I'm trying to set this up so I don't have to continually maintain it, I created another Javascript file with an array for sections similar to the following:
Expand|Select|Wrap|Line Numbers
  1. var sections = new array(
  2.  
  3. "Section 1 - Logical Questions",
  4. "Section 2 - Thought Provoking Questions",
  5. "Section 3 - Silly Questions"
  6.  
  7. );
  8.  
I tried revising my questions array by creating 3 separate arrays to align with the sections, so I would have question0, question1, and question2 arrays. Then, I tried to creating a nested loop structure that would print the section for the current section index, concatenate that index to the name of the array variable combined with the section index to print only those questions that apply to a particular section. Something like this:
Expand|Select|Wrap|Line Numbers
  1. function QuestionsFAQ()
  2. {
  3.     var sectionIndex = 0;
  4.     var questionIndex = 0;
  5.     var sectionCounter = 0;
  6.     var questionCounter;
  7.     var questionName;
  8.  
  9.     document.write('<h2 class="titlebar">&iquest; Questions ?</h2>')
  10.     document.write('<p class="notice">Please select from one of the following questions:</p>')
  11.  
  12.     while(sectionCounter <= 3)
  13.     {
  14.         document.write('<b><u>' + sections[sectionIndex] + '</u></b>');
  15.         document.write('<ul type="disc">')
  16.         for(questionCounter = 0; questionCounter < questionName+sectionCounter+.length; questionCounter++)
  17.         {
  18.             if(questionIndex == questionName+sectionCounter+.length) { return; }
  19.  
  20.             document.write('<li><a href="#topic' + (questionCounter + 1) + '">' + questionName+sectionCounter+[questionIndex] + '</a></li>')
  21.                 questionIndex++;
  22.         }
  23.         document.write('</ul>')
  24.         sectionCounter++
  25.     }
  26. }
  27.  
Obviously, this didn't work, but I'm not convinced yet it's not possible to achieve. I also thought about creating a separate array for the section and that worked a little bit better, but it would put ALL questions in each bulleted item in the list:
Expand|Select|Wrap|Line Numbers
  1. function QuestionsFAQ()
  2. {
  3.     var sectionIndex = 0;
  4.     var questionIndex = 0;
  5.     var sectionCounter = 0;
  6.     var questionCounter;
  7.     var questionName = new Array(questions0, questions1, questions2, questions3);
  8.  
  9.     document.write('<h2 class="titlebar">&iquest; Questions ?</h2>')
  10.     document.write('<p class="notice">Please select from one of the following questions:</p>')
  11.  
  12.     while(sectionCounter <= 3)
  13.     {
  14.         document.write('<b><u>' + sections[sectionIndex] + '</u></b>');
  15.         document.write('<ul type="disc">')
  16.         for(questionCounter = 0; questionCounter < questionName[sectionCounter].length; questionCounter++)
  17.         {
  18.             if(questionIndex == questionName.length) { return; }
  19.  
  20.             document.write('<li><a href="#topic' + (questionCounter + 1) + '">' + questionName[questionIndex] + '</a></li>')
  21.                 questionIndex++;
  22.         }
  23.         document.write('</ul>')
  24.         sectionCounter++
  25.     }
  26. }
  27.  
Like I said, this was closer, but instead of grabbing just the questions in the question0 array variable, it grabs all of the questions for each bullet and applies it the same number of times for the number of section indices that are available. It also is only printing the first section too, which I can't figure out why it's not printing all of them.

I'm sure this is as clear as mud, but hopefully it makes sense and someone can help me determine if what I'm trying to do is possible and where I'm going wrong.

Thanks,
beacon
Oct 13 '11 #1
Share this Question
Share on Google+
5 Replies


acoder
Expert Mod 15k+
P: 16,027
On line 14:
Expand|Select|Wrap|Line Numbers
  1. sections[sectionIndex]
sectionIndex is never incremented. Perhaps you meant to use sectionCounter.
Oct 13 '11 #2

Rabbit
Expert Mod 10K+
P: 12,430
Using questions0, questions1, and questions2 arrays is no more maintainable than what you had before because you would have to create additional arrays each time they add a new section. Why not use an array of arrays?

But in direct response to your question, the eval() function will evaulate the string through the javascript engine.
Oct 13 '11 #3

beacon
100+
P: 579
sectionIndex is never incremented
@acoder - you're absolutely right...good catch. I typed that before I created the variable and never went back to fix it. Still doesn't resolve the bigger issue, but one step closer is always a good thing.

@Rabbit - They shouldn't add any new sections. The sections they asked me to add have been there since they started, I just didn't have the page broken out that way.

How would I use an array of arrays? I'm not well-versed in Javascript and not sure how to implement an array of arrays, why that would be beneficial, nor am I familiar with the eval() function (which isn't a big deal because I can always look the function up).

Thanks,
beacon
Oct 13 '11 #4

Rabbit
Expert Mod 10K+
P: 12,430
An array of arrays would look like this
Expand|Select|Wrap|Line Numbers
  1. var arr = [["a", "b",] , ["c", "d"]];
You would retrieve "c" using arr[1][0]

For eval, you would do this
Expand|Select|Wrap|Line Numbers
  1. var var10 = "hello world";
  2. var index = "10";
  3. alert(eval("var" + index));
Oct 13 '11 #5

beacon
100+
P: 579
I think I got it to work using the following code:
Expand|Select|Wrap|Line Numbers
  1. function QuestionsFAQ()
  2. {
  3.     var sectionIndex = 0;
  4.     var questionIndex = 0;
  5.     var sectionCounter = 0;
  6.     var questionCounter;
  7.     var questionName = "questions";
  8.  
  9.     document.write('<h2 class="titlebar">&iquest; Questions ?</h2>')
  10.     document.write('<p class="notice">Please select from one of the following questions:</p>')
  11.  
  12.     while(sectionCounter != sections.length)
  13.     {
  14.         document.write('<b><u>' + sections[sectionCounter] + '</u></b>');
  15.         document.write('<ul type="disc">')
  16.             temp = eval(questionName + sectionCounter);
  17.  
  18.         for(questionCounter = 0; questionCounter < temp.length; questionCounter++)
  19.         {
  20.             if(questionIndex == temp.length) { return; }
  21.  
  22.             document.write('<li><a href="#topic' + (questionCounter + 1) + '">' + temp[questionIndex] + '</a></li>')
  23.                 questionIndex++;
  24.         }
  25.  
  26.         document.write('</ul>');
  27.         questionIndex = 0;
  28.         sectionCounter++;
  29.     }
  30. }
  31.  
@Rabbit - The array of arrays makes sense to me, but I'm afraid that the people that will actually be updating the file will get confused by it, which will result in errors. Glad to know that's a possibility though.

Thanks again for the help,
beacon
Oct 14 '11 #6

Post your reply

Sign in to post your reply or Sign up for a free account.