Using a for-loop to retrieve elements from an Array

Question

var beatlesArray; //global variable

var $ = function(id) {
  return document.getElementById(id);
}

function processImages() {
  beatlesNameStr = "";

  for (cntr = 1; cntr <= beatlesArray.length; cntr++) {
    console.log(beatlesArray[cntr]);
    beatlesNameStr += cntr + ". ";
  }

  $("list").innerHTML = beatlesNameStr;
}

function addJohn() {
  beatlesArray.push("John");
  this.border = '4px';
  this.style.color = 'yellow';

  $("paul").border = "0px";
  $("george").border = "0px";
  $("ringo").border = "0px";
}

function addPaul() {
  beatlesArray.push("Paul");

  this.border = '4px';
  this.style.color = 'yellow';

  $("john").border = "0px";
  $("george").border = "0px";
  $("ringo").border = "0px";
}

function addGeorge() {
  beatlesArray.push("George");

  this.border = '4px';
  this.style.color = 'yellow';

  $("john").border = "0px";
  $("paul").border = "0px";
  $("ringo").border = "0px";
}

function addRingo() {
  beatlesArray.push("Ringo");

  this.border = '4px';
  this.style.color = 'yellow';

  $("john").border = "0px";
  $("paul").border = "0px";
  $("george").border = "0px";
}

window.onload = function() {
  $("showlist").onclick = processImages;
  $("john").onclick = addJohn;
  $("paul").onclick = addPaul;
  $("george").onclick = addGeorge;
  $("ringo").onclick = addRingo;
  beatlesArray = new Array();
}

<html>

<head>
  <title>Assignment 4</title>
  <link rel="stylesheet" type="text/css" href="asgn4_dove.css">
  <script src="asgn4_dove.js"></script>
</head>

<body>
  <h1>Assignment 4</h1>

  <h4>The Beatles</hr>

    <table border='1' cellpadding='8px'>
      <tr>
        <td>
          <img id="john" src="http://profperry.com/Classes20/JQuery/beatles_john.jpg" alt="Picture of John">
          <br>John
        </td>
        <td>
          <img id="paul" src="http://profperry.com/Classes20/JQuery/beatles_paul.jpg" alt="Picture of Paul">
          <br>Paul
        </td>
        <td>
          <img id="george" src="http://profperry.com/Classes20/JQuery/beatles_george.jpg" alt="Picture of George">
          <br>George
        </td>
        <td>
          <img id="ringo" src="http://profperry.com/Classes20/JQuery/beatles_ringo.jpg" alt="Picture of Ringo">
          <br>Ringo
        </td>
    </table>
    <br><br>
    <input type="button" id="showlist" value="Show Me the List">
    <br>
    <p id="list"></p>

</body>

</html>

I’m new to JS and keep running into issues for a recent class assignment. I’ve reached out to my professor for help but I’m still not understanding it. For our assignment, I need to use a for-loop to retrieve elements from my beatlesArray and concatenate them into a string variable with this format if the images are clicked : 1. Paul 2. George. To do this I was told NOT to use beatlesArray.join(", ") but cannot figure out how to add the elements in my beatlesNameStr. Would anyone be able to assist?

I tried adding them to the string by using beatlesNameStr += cntr + ". " + addJohn…etc but that didn’t work at all. I’m just confused how exactly to add the elements that are being pushed.

hinting: You are outputting console.log(beatlesArray[cntr]) — isn't that showing the names you want? Then you just want to add that name, the name in beatlesArray[cntr] to the current _ beatlesNameStr_ in a way similar to how you're adding cntr + ". " — Stephen P
– Stephen P, Commented Mar 25, 2021 at 0:20
addJohn is not the array element, it's not even a string, why would you use + addJohn? — Barmar
– Barmar, Commented Mar 25, 2021 at 0:23
Thank you guys for all your insight and feedback! I managed to figure it out and see where I went wrong. — ZSmef
– ZSmef, Commented Mar 25, 2021 at 0:36

andellapie · Accepted Answer · 2021-03-25 00:29:24Z

1

You are on the right track. Update processImages function like this:

function processImages ()
{
    var beatlesNameStr = "";    
    for (cntr = 1; cntr <= beatlesArray.length; cntr++)
    {
        beatlesNameStr += cntr + ". " + beatlesArray[cntr - 1] + " ";
    }   
    $("list").innerHTML = beatlesNameStr; 
}

or using ES6 syntax:

function processImages ()
{
    var beatlesNameStr = beatlesArray.reduce((result, current, index) => `${result} ${index + 1}.${current}`, "");  
    $("list").innerHTML = beatlesNameStr; 
}

answered Mar 25, 2021 at 0:29

andellapie

1762 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Barmar Over a year ago

If he's not allowed to use join() I think reduce() would also be forbidden.

ZSmef Over a year ago

Thank you! The first one worked for me. The 2nd is way out of what we’re learning but I plan to continue learning JS after this semester and will make sure to study this.

Collectives™ on Stack Overflow

Using a for-loop to retrieve elements from an Array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related