2017-03-12 11 views
0

私は比較的新しいHTMLですので、私に同行してください。私はすでにFlickrからボタンに画像を取り込むために私に提供されていた単純なjavascript関数を追加しようとしています。ボタンをクリックすると、何も起こりません。私はどこでエラーが発生しているのかわかりませんが、私はそれが正しく実行されていない関数と関係があると思います。ボタンにjavascript機能を追加しようとしています

HTML:

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>getJSON</title> 
     <meta charset="utf-8" /> 
     <script src="jquery-3.1.1.min.js"></script> 
    </head> 
    <body> 
    <button onclick="myFunction()">Click me</button> 
    <script> 
    function myFunction() 
    { //Functions don't need names. This function will simply run when the page loads 
     var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 
     $.getJSON(flickerAPI, 
     { // The "$" simply refers to jQuery. This calls the getJSON function that is found inside jquery-3.1.1.min.js 
     tags: "Baruch College", //Some filter information in the format set by Flickr, who owns the JSON 
     tagmode: "any", 
     format: "json" 
     }) 
     .done(function(data) 
     { //Here, a an unnamed function is created made into the event handler for the "done" event... in other words, this is the code that will manifest itself when the getJSON is done. 
      $.each(data.items, function(i, item) 
      { 
      $("<img>").attr("src", item.media.m).appendTo("#images"); 
      if (i === 5) 
      { 
       return false; 
      } 
      }); 
     }); 
    } 
    </script> 

    </body> 
</html> 

私はHTMLで述べたjqueryのスクリプトをアップロード:http://pastebin.com/2CfRNkvq

+0

ローカルサーバーでページを実行する必要があります。 –

+0

現在実行されているサーバーは何ですか? – user1359783

答えて

0

あなたはそれらが取得された後の画像が配置される場所を指定する必要があります。 JavaScriptコードでは、画像ごとに<img>というタグが作成され、id="images"という要素に追加されていることがわかります。

ただ、このようなボタン要素にid="images"を追加します。

<button onclick="myFunction()" id="images">Click me</button>

ボタンをクリックすると、画像がボタンの内側に配置されます。

+0

ありがとう、それは今働いている! – user1359783

関連する問題