Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Richard Contreras
Richard Contreras
7,026 Points
Posted by Richard Contreras
Richard Contreras
7,026 Points

Using a "for loop" to write repetitive lines of code.

Please see this codepen: https://codepen.io/pdxcoder/pen/qorVmp

Basically I'm trying to write a quiz with radio buttons. In the html you'll notice the values ("USDT", "ETH", etc.) rotate because I don't want the answers to be predictable.

The quiz works right now (at least for the stage I'm at). When you click "submit", the program grades the quiz and displays the totals for each value. I know it's crude and there are many things I want to change about it, but I've only been studying JavaScript for a few weeks and this is where I'm at in my progress.

My question is, look at lines 35-40 of the JS. I eventually want there to be 50 questions, so this is not scalable. I tried writing a "for loop" (see commented out JS lines 28-34) to write "question1", "question2", "question3" and plug that into the findAnswer() function. But it does not work.

I wrote a test loop (see commented out JS lines 47-55) to confirm that my "for loop" is indeed writing out "question1", etc. in quotes.

Any help would be greatly appreciated.

brendon hanson
brendon hanson
6,191 Points
brendon hanson
brendon hanson
6,191 Points

When it comes to doing the near same thing multiple times what you want to do is make a template in the html(or even in JS sometimes using HTML) and use JS to plug in the different values. This concept may be new to you and if it is I would be happy to show you an example with your code.

2 Answers

Steven Parker
Steven Parker
229,708 Points
Steven Parker
Steven Parker
229,708 Points

Your loop should work if you don't embed quote marks into the string:

      var scoreQuestion = "question" + j;
Richard Contreras
Richard Contreras
7,026 Points
Richard Contreras
Richard Contreras
7,026 Points

Steven, you're right, it does work, but I'm still confused...

When I was writing out each line (JS 35-40), I included quote marks around the argument, e.g., "question1". If I get rid of these quote marks, the program doesn't work.

From what I understand, your fix (which again, does work), is plugging in question1 without quote marks as the argument.

Sorry if I'm being delirious, but I am a JavaScript newbie.

Thanks.

Steven Parker
Steven Parker
229,708 Points
Steven Parker
Steven Parker
229,708 Points

I can see how this might be confusing. The difference is that when you use a literal string, it must be enclosed in quotes. to indicate to the system that it's not a variable name. But it represents the contents within the quotes.

But a variable represents the the contents that were assigned to it.

For example:

var test = "hello";     // test now has this inside it (with no quotes)  --> hello
someFunction(test);     // so this line does exactly the same thing...
someFunction("hello");  // ...as this line
Richard Contreras
Richard Contreras
7,026 Points
Richard Contreras
Richard Contreras
7,026 Points

Wow, I see where I was confused. Thanks for your explanation, very helpful.

Using your example, I thought my "for loop" output had to be "hello" with quotes so that the function would see the quote marks and interpret the argument as the string contents - i.e., hello w/out quote marks. I thought if my "for loop" output was hello w/out quote marks, the function would be looking for the variable hello, which doesn't exist. Instead, with my bad code, the function is processing the argument "hello" (i.e., not the contents of the string "hello", which is hello, but rather the contents of the string ' "hello" ', which is "hello").

This has been very helpful for my conception of what a function actually does. Thanks, again.

Richard Contreras
Richard Contreras
7,026 Points
Richard Contreras
Richard Contreras
7,026 Points

Brendon. Thanks for your response. I would love to learn about the template method.

And I know I need to grow out of the code I have written, but I would still like to know why that "for loop" on lines 28-34 doesn't work.

Thanks again!

brendon hanson
brendon hanson
6,191 Points
brendon hanson
brendon hanson
6,191 Points

I believe your loop question was answered and I will show you what I mean when I say "template". Here is an example from one of my code projects. If you would like me to break down what each part does then just ask. I may not respond within a few hours because I have to do something otherwise here you go:

    <div id="books-wrap"></div>

function renderBooks() {
  var booksHTML = "";
  for (var i = 0; i < booksFiltered.length; i++) {
    var currentBook = booksFiltered[i];
    booksHTML += '<div class="card" id="book-' + i + '"><div class="container"><h4 class="bookTitle"><b  id="bookTitle">' + currentBook.title + '</b></h4><p class="bookDesc" id="bookDesc">' + currentBook.description + '</p><img src="http://icons.iconarchive.com/icons/graphicloads/colorful-long-shadow/256/Book-icon.png" class="bookPic" id="bookPic"><p class="author" id="author">' + currentBook.author + '</p></div></div>';
  }
  document.getElementById('books-wrap').innerHTML = booksHTML;
}

Of course there is so much more code behind this(100's of lines) Also the info is coming from an object literal(basically an array of objects). I believe that is what it's called.