Using a for-loop to retrieve elements from an Array

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();
}

JavaScript
​x
 
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>

JavaScript
 
<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.

Answer

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; 
}

JavaScript
 
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; 
}

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

Advertisement

Answer