Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Nancy Melucci
seal-mask
.a{fill-rule:evenodd;}techdegree
Nancy Melucci
Front End Web Development Techdegree Student 34,543 Points

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

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.

Steven Parker
Steven Parker
221,328 Points

By "id names" do you mean the id attribute values of certain page elements? And which elements, just images? And if clicking adds to the array, when is the array printed?

Can you provide a link to the example and/or the instructions?

4 Answers

Steven Parker
Steven Parker
221,328 Points

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.

Nancy Melucci
seal-mask
.a{fill-rule:evenodd;}techdegree
Nancy Melucci
Front End Web Development Techdegree Student 34,543 Points

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

  1. 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!

  1. 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();




}
Nancy Melucci
seal-mask
.a{fill-rule:evenodd;}techdegree
Nancy Melucci
Front End Web Development Techdegree Student 34,543 Points

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();
}
Nancy Melucci
seal-mask
.a{fill-rule:evenodd;}techdegree
Nancy Melucci
Front End Web Development Techdegree Student 34,543 Points

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.

Steven Parker
Steven Parker
221,328 Points

If you have any specific questions as you proceed you can always start a new question here.

And happy coding!