How to add the id of an image (onclick) to an array of Strings.

Question

This is a hail mary pass. I am working from an example given by the instructor of adding user input text to an array in JavaScript.

I am really bad with JavaScript, and because the source of the array members is different I am stumped.

The assignment is to add the id names to an array and print the array out. The images are provided. So it's somewhat different than the example given.

How would you do this? I'll take any suggestions.

Thanks.

Answer 1 · 2018-07-03T17:26:29Z

July 3, 2018 5:26pm

I wouldn't feel comfortable doing your homework but I'll give you a few pointers.

First off, I'm going to disregard the "some of the example code", as it appears to be designed to work with different HTML.

So based on the instructions, I would expect to see code near where the onclick handler is added to the showList button to add click handlers to each of the images. They could all share one handler, but since he says "NOTE: You do not need to use JavaScript to discover the name." they could each have a separate one that would set a specific name. Your choice.

Then, for inside those handlers, he gives you sample code for turning on the border with JavaScript instead of CSS:

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

However, I wouldn't expect his code to operate since it seems to be setting the wrong properties (you might get some "brownie points" for pointing that out). But this should work:

  this.style.borderWidth = "4px";
  this.style.borderColor = "yellow";

And perhaps an even better method would be to set all properties using the shorthand property border:

  this.style.border = "4px solid yellow";

His code for turning the other borders off would work, but you might prefer to set them back to the thin red border your CSS sets initially.

Then, as you complete the processInfo handler, be careful of your variable names. I notice you define a beatleStr (singular) but then reference beatlesStr (plural). Also, if you push the names (and sequence numbers, don't forget that) into a list in the new image click handlers, you will only need to join the list and display it in this one.

Hopefully, these hints will get you back on track.

Answer 2 · 2018-07-03T15:11:27Z

July 3, 2018 3:11pm

It's a private (course) website. So I'll reproduce the code below. He wants the border changed with JS also, so my solution for that part is clearly unacceptable also. I'll include the JS code for his text-based example, which helps me not at all. Again, I feel really hamstrung working with JS. I feel like I am never gonna get it.

"Declaring the Array

You MUST declare BeatlesArray as a global variable.

This means it must be declared outside of any function.

WARNING: Do not try to create the array at the same time you are declaring it! (i.e. using "new Array()")

Creating the Array

Since the array is declared globally, you can create the empty array in the function the runs when the window first loads.

WARNING: Do not use a "var" here. A "var" declares a variable and you have already done that globally.

Loading the Array

There are four images on the web page, labeled John, Paul, George, and Ringo, respectively.

Each time a user clicks on one of these images you need to add the "name" of the image shown to the end of the BeatlesArray.

NOTE: You do not need to use JavaScript to discover the name. You can just literally decide that when the image of John is clicked to add the word "John" as the last element in the array.

There is no limit to how many images can be clicked or how many times that they can be clicked.

Changing the Border of the Image

To give the user a visual cue of when an image is clicked you must put the following code in each of the functions that is called when an image is clicked...

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

This will make the border around the image be 4 pixels wide and yellow.

However, I only want one image to be shown with a yellow border when it is clicked. This means you must make any other image, that has a yellow border, go back to its original state.

The easiest way to do this is to always set the borders for ALL images back to their original state as the first thing you code in the functions that are called when an image is clicked.

Example: $("john").border = "0px";

The "Show Me the List" Button

When the "Show Me the List" button is clicked the program shall...

Use a for-loop to retrieve the elements from the BeatlesArray and concatenate them into a string variable according to the format described below...

Example: If I clicked Paul, then George, then Ringo, then George again my string variable would be in the following format:

"1. Paul,  2. George,   3. Ringo,  4. George"

Notice that you do NOT place a comma after the last item!

Display the string variable with the formatted names in the paragraph that has an id of "list"."

beatles.html

<html>
<head>
    <title>Assignment 4</title>
    <link rel="stylesheet" type="text/css" href="beatles.css">
    <script src="beatles.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>

beatles.css

html {margin:0; padding:0;}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: yellow;
    background-color: #7D84E7;
}


p {
    font-size: 16px;
}

img   {
border:solid 1px red; 
margin:10px;

}

img:active {

border: 6px solid yellow;

}

beatles.js

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

var beatleStr = " ";




var processInfo = function()
{


    var myBeatle = "";

    var beatleStr = $.value;


    var myBeatleStr = beatlesStr + ", ";

    myBeatles.push(myBeatle);

    //myBeatleStr = myTransactions.join("<br>");

    $("list").innerHTML = myBeatleStr;


};



window.onload = function ()
{
    $("showlist").onclick = processInfo;  //Remember no ()!!
    myBeatles = new Array();




}

Answer 3 · 2018-07-03T15:12:43Z

July 3, 2018 3:12pm

Here is some of the example code...And I apologize if this is TMI...

var myTransactions;  //global

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

var processInfo = function()
{
    var myTranStr = "";
    var myTran = "";

    var myItem = $("item").value;
    var myAmount = $("amount").value;

    var myTran = myItem + ":" + myAmount;

    myTransactions.push(myTran);

    myTranStr = myTransactions.join("<br>");

    $("msg").innerHTML = myTranStr;

    $("item").value = "";
    $("amount").value = "";
}

window.onload = function () {
    $("addbutton").onclick = processInfo;
    myTransactions = new Array();
}

Answer 4 · 2018-07-03T21:11:45Z

July 3, 2018 9:11pm

Thanks. It's nice to get the code but I know I won't learn anything that way so thanks for the hints. I wasn't finding the instructor's material helpful and 2 weeks ago when I was stuck and asked for help, I didn't hear from him for days. So I appreciate your stepping up. I'll see what I can do.

Welcome to the Treehouse Community

Looking to learn something new?

Nancy Melucci

Nancy Melucci

How to add the id of an image (onclick) to an array of Strings.

Steven Parker

Steven Parker

4 Answers

Steven Parker

Steven Parker

Nancy Melucci

Nancy Melucci

Nancy Melucci

Nancy Melucci

Nancy Melucci

Nancy Melucci

Steven Parker

Steven Parker