Question

我必须为每个类似的艺术家添加一个点击事件。如果用户点击类似的艺术家，则该艺术家姓名将被放置在文本框中，并且页面的行为就像按下按钮一样。按下每个按钮只会提供有关詹姆斯泰勒的“硬编码”信息。因此，当用户点击其中一个类似的艺术家时，我必须调用一个函数，将类似艺术家的名字放在文本框中，然后它应该弹出一个警告，上面写着“为艺术家调用AJAX：”+ artistName

当我点击艺术家名称时，所有艺术家名称都会重新显示，文本框中的值会显示[object HTMLInputElement]

这是我的代码：

<!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) {

                var call = "http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist="
                        + artist +
                        "&api_key=....&format=json";

                // 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() {
                                sendRequest(this);
                                document.getElementById('textBoxId').value = textBoxId;   
                            };
                        }
                    }
                }
            }

        </script>

    </body>
</html>

Answer 1

你很亲密

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

另外请给表单一个音乐ID，更改按钮键入=＆＃34;提交＆＃34;并添加此脚本，以便您可以在表单中按Enter键（并从按钮中删除脚本）

window.onload=function() {
  document.getElementById("music").onsubmit=function() {
    sendRequest(this.artist.value);
    return false;
  }
}

如何在数组值上添加click事件并更改文本框值？

1 个答案: