How to add click event on array values and change the textbox values?

html-css
js

#1

I have to add a click event to every similar artist. If the user clicks on a similar artist, that artist name is placed in the textbox and the page acts as if the button has been pressed. Every button press will just provide the “hard coded” information about James Taylor. So, when the user clicks on one of the similar artists, I have to invoke a function that puts the similar artist’s name in the text box and it should then pop up an alert that says "AJAX call being made for artist: " + artistName.

When I click on an artist name, all the artists names show up again instead of the hard coded information about James Taylor.

Here is my code:

<!DOCTYPE html>
<html>
    <head>
        <title>Get Musician Biography (ajax demo)</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            body {
                background-color: #607070;
                color:white;
                font-size:14px;
                font-weight:bold;
                letter-spacing:1px;
                line-height:24px;
                margin:auto;
                font-family:Verdana, Geneva, sans-serif;
            }
            #box, table {
                margin:15px;
            }
            .pic {
                border: 5px inset white;
                padding: 10px;
                margin:15px;
            }
            .none {
                display:none;
            }
            #similarArtistsDivId {
                margin-left: 50%;
            }
        </style>
    </head>
    <body>
        <h4>This version "hard codes" a call to a saved local text file 
            that contains the JSON - this is so my Web API key doesn't lock out from overuse</h4>
        <div id="box">
            <h1>Get Bio (AJAX demo) Plain JavaScript</h1>
            <h2> -> hard coded for James Taylor</h2>
            <form name="music">
                Enter the name of your favorite artist, for example
                <input id= "textBoxId" type="text" name="artist" value="" size="30" />
                <input type="button" value="Get Bio" onClick="sendRequest(document.music.artist.value)"/>
            </form>
        </div>
        <table>
            <tr>
                <td><img id="picture" src="" alt=""></td>
                <td id="bio"></td>
            </tr>
        </table>
        <div id="similarArtistsDivId"></div>
        <script>

            //Make the XMLHttpRequest Object
            //alert('create req');
            var httpReq;
            if (window.XMLHttpRequest) {
                httpReq = new XMLHttpRequest();  //For Firefox, Safari, Opera
            } else if (window.ActiveXObject) {
                httpReq = new ActiveXObject("Microsoft.XMLHTTP");         //For IE 5+
            } else {
                alert('ajax not supported');
            }

            function sendRequest(artist) {


                // Don't make a live call (dont want the Web API key to get shut 
                // down with everyone running in lab.
                call = "03b_last_fm_json.txt";  // call pre-saved AJAX response

                //alert ('sending request with URL '+call);

                httpReq.open("GET", call);
                httpReq.onreadystatechange = handleResponse;
                httpReq.send(null);
            }

            function handleResponse() {
                //alert('handling response');
                if (httpReq.readyState === 4 && httpReq.status === 200) {

                    var response = httpReq.responseText;
                    //alert ("response text is " + response);

                    // wrap the json in parentheses to avoid tripping over javascript ambiguity...
                    response = "(" + response + ")";
                    var jsonObj = eval(response);
                    //alert ("artist is "+jsonObj.artist);

                    if ((jsonObj.artist === null) || (jsonObj.artist.similar.artist === null)) { // means artist not found.
                        document.getElementById("bio").innerHTML = "<br/><br/>" + jsonObj.message;
                        document.getElementById("picture").src = "";
                        document.getElementById("picture").setAttribute("class", "none");
                    } else {
                        document.getElementById("bio").innerHTML = jsonObj.artist.bio.summary;
                        //alert ("image link is" + jsonObj.artist.image[4]['#text']);
                        document.getElementById("picture").src = jsonObj.artist.image[3]['#text'];
                        document.getElementById("picture").setAttribute("class", "pic");

                        for (var i = 0; i < jsonObj.artist.similar.artist.length; i++) {
                            var similarArtist = document.createElement("div");
                            similarArtist.innerHTML = jsonObj.artist.similar.artist[i].name;

                            document.getElementById('similarArtistsDivId').appendChild(similarArtist);
                            similarArtist.onclick = function () {
                                var artist = this.innerHTML;
                                document.getElementById('textBoxId').value = artist;
                                sendRequest(artist);
                            };
                        }
                    }
                }
            }

        </script>

    </body>
</html>

txt. file

// 20180216094034

{
  "artist": {
    "name": "James Taylor",
    "mbid": "c5a69f1d-f4fc-42b1-9e99-5b3cd35406fa",
    "url": "https://www.last.fm/music/James+Taylor",
    "image": [
      {
        "#text": "https://lastfm-img2.akamaized.net/i/u/34s/27055fa923384b3eb2da7bc24efe5eba.png",
        "size": "small"
      },
      {
        "#text": "https://lastfm-img2.akamaized.net/i/u/64s/27055fa923384b3eb2da7bc24efe5eba.png",
        "size": "medium"
      },
      {
        "#text": "https://lastfm-img2.akamaized.net/i/u/174s/27055fa923384b3eb2da7bc24efe5eba.png",
        "size": "large"
      },
      {
        "#text": "https://lastfm-img2.akamaized.net/i/u/300x300/27055fa923384b3eb2da7bc24efe5eba.png",
        "size": "extralarge"
      },
      {
        "#text": "https://lastfm-img2.akamaized.net/i/u/300x300/27055fa923384b3eb2da7bc24efe5eba.png",
        "size": "mega"
      },
      {
        "#text": "https://lastfm-img2.akamaized.net/i/u/300x300/27055fa923384b3eb2da7bc24efe5eba.png",
        "size": ""
      }
    ],
    "streamable": "0",
    "ontour": "0",
    "stats": {
      "listeners": "912464",
      "playcount": "12591781"
    },
    "similar": {
      "artist": [
        {
          "name": "Jackson Browne",
          "url": "https://www.last.fm/music/Jackson+Browne",
          "image": [
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/34s/3b6a9dda93c94e959aca375a31d8aae3.png",
              "size": "small"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/64s/3b6a9dda93c94e959aca375a31d8aae3.png",
              "size": "medium"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/174s/3b6a9dda93c94e959aca375a31d8aae3.png",
              "size": "large"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/300x300/3b6a9dda93c94e959aca375a31d8aae3.png",
              "size": "extralarge"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/300x300/3b6a9dda93c94e959aca375a31d8aae3.png",
              "size": "mega"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/300x300/3b6a9dda93c94e959aca375a31d8aae3.png",
              "size": ""
            }
          ]
        },
        {
          "name": "Jim Croce",
          "url": "https://www.last.fm/music/Jim+Croce",
          "image": [
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/34s/1361f69165ce427ebde4301bd12f5a5f.png",
              "size": "small"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/64s/1361f69165ce427ebde4301bd12f5a5f.png",
              "size": "medium"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/174s/1361f69165ce427ebde4301bd12f5a5f.png",
              "size": "large"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/300x300/1361f69165ce427ebde4301bd12f5a5f.png",
              "size": "extralarge"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/300x300/1361f69165ce427ebde4301bd12f5a5f.png",
              "size": "mega"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/300x300/1361f69165ce427ebde4301bd12f5a5f.png",
              "size": ""
            }
          ]
        },
        {
          "name": "Crosby, Stills & Nash",
          "url": "https://www.last.fm/music/Crosby,+Stills+&+Nash",
          "image": [
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/34s/8420c6f2d93e424abd8ef588d885de3f.png",
              "size": "small"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/64s/8420c6f2d93e424abd8ef588d885de3f.png",
              "size": "medium"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/174s/8420c6f2d93e424abd8ef588d885de3f.png",
              "size": "large"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/300x300/8420c6f2d93e424abd8ef588d885de3f.png",
              "size": "extralarge"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/300x300/8420c6f2d93e424abd8ef588d885de3f.png",
              "size": "mega"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/300x300/8420c6f2d93e424abd8ef588d885de3f.png",
              "size": ""
            }
          ]
        },
        {
          "name": "Loggins & Messina",
          "url": "https://www.last.fm/music/Loggins+&+Messina",
          "image": [
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/34s/563724612b684f4ab99f01163e80def5.png",
              "size": "small"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/64s/563724612b684f4ab99f01163e80def5.png",
              "size": "medium"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/174s/563724612b684f4ab99f01163e80def5.png",
              "size": "large"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/300x300/563724612b684f4ab99f01163e80def5.png",
              "size": "extralarge"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/300x300/563724612b684f4ab99f01163e80def5.png",
              "size": "mega"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/300x300/563724612b684f4ab99f01163e80def5.png",
              "size": ""
            }
          ]
        },
        {
          "name": "Gordon Lightfoot",
          "url": "https://www.last.fm/music/Gordon+Lightfoot",
          "image": [
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/34s/a71a8cd0adddfa3c7b3a0e5dd246779b.png",
              "size": "small"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/64s/a71a8cd0adddfa3c7b3a0e5dd246779b.png",
              "size": "medium"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/174s/a71a8cd0adddfa3c7b3a0e5dd246779b.png",
              "size": "large"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/300x300/a71a8cd0adddfa3c7b3a0e5dd246779b.png",
              "size": "extralarge"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/300x300/a71a8cd0adddfa3c7b3a0e5dd246779b.png",
              "size": "mega"
            },
            {
              "#text": "https://lastfm-img2.akamaized.net/i/u/300x300/a71a8cd0adddfa3c7b3a0e5dd246779b.png",
              "size": ""
            }
          ]
        }
      ]
    },
    "tags": {
      "tag": [
        {
          "name": "folk",
          "url": "https://www.last.fm/tag/folk"
        },
        {
          "name": "singer-songwriter",
          "url": "https://www.last.fm/tag/singer-songwriter"
        },
        {
          "name": "acoustic",
          "url": "https://www.last.fm/tag/acoustic"
        },
        {
          "name": "classic rock",
          "url": "https://www.last.fm/tag/classic+rock"
        },
        {
          "name": "rock",
          "url": "https://www.last.fm/tag/rock"
        }
      ]
    },
    "bio": {
      "links": {
        "link": {
          "#text": "",
          "rel": "original",
          "href": "https://last.fm/music/James+Taylor/+wiki"
        }
      },
      "published": "21 Feb 2006, 04:08",
      "summary": "James Taylor (born 12th March 1948) is an American singer-songwriter and guitarist, born in Boston, Massachusetts. He grew up in Chapel Hill, North Carolina, where his father Isaac Taylor was the dean of the University of North Carolina Medical School. His family summered on Martha's Vineyard.\n\t\t\t\nTaylor's career began in the mid-1960s, and was the first artist signed to The Beatles's Apple Records. He found further success in the early 1970s, singing sensitive and gentle acoustic songs. <a href=\"https://www.last.fm/music/James+Taylor\">Read more on Last.fm</a>",
      "content": "James Taylor (born 12th March 1948) is an American singer-songwriter and guitarist, born in Boston, Massachusetts. He grew up in Chapel Hill, North Carolina, where his father Isaac Taylor was the dean of the University of North Carolina Medical School. His family summered on Martha's Vineyard.\n\t\t\t\nTaylor's career began in the mid-1960s, and was the first artist signed to The Beatles's Apple Records. He found further success in the early 1970s, singing sensitive and gentle acoustic songs. He was part of a wave of soft singer-songwriters of the time that also included Carole King, Joni Mitchell, Crosby, Stills & Nash, John Denver, Jackson Browne, and Carly Simon (whom he later married).\n\nHis 1976 Greatest Hits album was certified Diamond and has sold 12 million US copies. Following his 1977 album, JT, he has retained a large audience over the decades. Every album that he released from 1977 to 2006 sold over a million copies. \n\nIn March 2010 he commenced the Troubadour Reunion Tour with Carole King and members of his original band, including Russ Kunkel, Leland Sklar, and Danny Kortchmar. They played shows in Australia, New Zealand, Japan and North America, including the final event at Pittsburgh's Mellon Arena. The tour was a major commercial success, and in some locations found Taylor playing arenas instead of his usual theatres or amphitheatres. With an average capacity of 95% for the shows, the tour raised millions for various charities of Taylor and King's choice.\n\nHis 2015 album Before This World became his first number one. <a href=\"https://www.last.fm/music/James+Taylor\">Read more on Last.fm</a>. User-contributed text is available under the Creative Commons By-SA License; additional terms may apply."
    }
  }
}

#2

Where is the file we can use? otherwise i have to make AJAX requests, i removed the key from your topic, you shouldn’t include it

Please include the file so we don’t have to make the AJAX requests, i did make the AJAX request, and it seemed to work fine? What isn’t working?


#3

Click events can be added to html elements, not to an array.

Why would you eval() over something like parse()?


#4

I just added it above.


#5

that is only an answer to one of the question i asked:


#6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.