2017-12-22 12 views
1

ドロップダウンメニューから選択するたびに、特定のデータがfacebookから取得され、別のdivに追加されます。別の選択が行われるたびにdivの内容を更新しようとしていますが、分単位でコンテンツが最初の内容の後に追加されます。divの内容を置換するjavascript(jqueryなし)

これは、これが標的にされているdiv要素である選択に基づいてデータを取得し、返されたデータ

<script> 

    city = document.getElementById("citySelection") 
    city.addEventListener("change", function() { 
     var selected = this.value; 
     var eventsList = document.getElementById("events"); 
     if (selected == "None") { 
     eventsList.style.display = "none"; 
     } else { 
     eventsList.style.display = "block"; 
     }; 
     if (selected == 'Bristol') { 
     getBristolEvents(); 
     }; 
     if (selected == 'Leeds') { 
     getLeedsEvents(); 
     }; 
     if (selected == 'Manchester') { 
     getManchesterEvents(); 
     }; 
     if (selected == 'Newcastle') { 
     getNewcastleEvents(); 
     }; 
    }); 


    function createList(response, listId) { 
     var list = document.createElement('UL') 
     for (var i = 0; i < 10; i++) { 
     var events = response.data[i].name 
     var node = document.createElement('LI'); 
     var textNode = document.createTextNode(events); 
     node.appendChild(textNode); 
     list.appendChild(node) 
     listId.appendChild(list); 
    }}; 

    </script 

からリストを作成するコードです:

<html> 
<div id="events" style="display: none"> 
    <div id="eventsDiv" style="display: block"> 
     <div id="eventsListOne"> 
     <h3 id='headerOne'></h3> 
    </div> 
     <div id="eventsListTwo"> 
     <h3 id='headerTwo'></h3> 
     </div> 
     <div id="eventsListThree"> 
     <h3 id='headerThree'></h3> 
     </div> 
    </div> 
    </div> 
</div> 
</html> 

私はinnerHTMLプロパティをリセットしようとしていますFacebookのデータを取得する機能が呼び出されるたびにdivの名前が付けられます。

<script> 
    function getEventsThree(fbUrl, title) { 
    var listId = document.getElementById('eventsListThree'); 
    var headerThree = document.getElementById('headerThree'); 
    listId.innerHtml = ""; 
    headerThree.append(title) 
    FB.api(
     fbUrl, 
     'GET', { 
     access_token 
     }, 
     function(response) { 
     listId.innerHtml = createList(response, listId) 
     } 
    )}; 
    </script> 

しかし、それでもdivの内容はリセットされません。

私は他の応答を見ましたが、それらはすべて私が使用していないjqueryを使用しています。

誰でもこの問題を解決する最善の方法についてアドバイスできますか?ありがとう。

+0

テキストブロックだけでなくjsスニペットの場合は、これを見てみるほうがはるかに簡単です。それは素晴らしいSOの機能だと私は可能な限り使用することをお勧めします。あなたがそれをしている間は、「うまくいかない」よりも説明的な言葉を使ってみてください。私は答えを提示するつもりですが、あなたがスニペットを提供したかどうか、そしてエラーの場合のより良い説明を確認するのは簡単でしょう。 –

+0

謝罪、ここに初めて投稿する –

+0

心配することなく、あなたの利益のためのアドバイスです。スニペットにジャンプしてすばやく変更することができることは、検証可能な回答を提供する機会を与え、回答の質を高める可能性があります。ようこそ。 –

答えて

0

あなたのヘネシーのアプローチは問題ないと思います。内部コンテンツを生成し、.innerHTMLと設定します。

少なくとも1つの問題は、.innerHTMLを戻り値createListに設定しているように見えますが、その関数は何も返しません。

+0

ヘネシーアプローチ? まだ少し混乱して申し訳ありません。 私はまだ正しい機能を得ていません。作成するリストを返すように 'createList'を設定し、' listId'の 'innerHTML'をこの値に設定します。 –

+0

私はそれをやったことはありません。 ヘッダを設定してinnerHTMLを空に設定していたのは、コードがもう存在しない要素にヘッダを追加しようとしていたため、残りのコードとの干渉を止めることでした。 –

関連する問題