この単純なAJAXスクリプトはなぜ機能しないのですか？

-1

このinsertAdjacentHTMLが何であり、なぜ私のスクリプトが動作しないのか説明できますか？この単純なAJAXスクリプトはなぜ機能しないのですか？

<!DOCTYPE html> 
<html> 

<head> 
    <title></title> 
</head> 

<body> 
    <div class="animal-info"> 
    </div> 
    <button id="btn">Ae</button> 
    <script type="text/javascript"> 
    var animalContainer = document.getElementById("animal-info"); 
    var btn = document.getElementById('btn'); 
    btn.addEventListener("click", function() { 
     var request = new XMLHttpRequest(); 
     request.open('GET', 'https://learnwebcode.github.io/json-example/animals-1.json'); 
     request.onload = function() { 
     var ourData = JSON.parse(request.responseText); 
     renderHTML(ourData); 
     }; 
     request.send(); 
    }); 

    function renderHTML(data) { 
     animalContainer.insertAdjacentHTML('beforeend', 'testing 123'); 
    }; 
    </script> 
</body> 

</html>

出典

2017-02-08 Giorgi Macharashvili

idが 'animal-info'の要素はありません。 –

あなたの期待する行動は何ですか？実際に何が起こっていますか？何かエラーがありますか？「うまくいかない」というのは、役に立つ問題の説明ではありません。 –

のクラスがあります。

document.getElementsByClassNameメソッドは、NodeListを返します。

ここはworking solutionです。

出典

2017-02-08 23:01:08

なぜ私はそんなダムで、毎回愚かな間違いを犯しているのですか？（ –

@GiorgiMacharashvili - 回答のうちの1つを正解とすることを考えてみてください。 –

ofc男私はそれをやろうとしていました。返信を受け入れる –

いない要素は、動物情報のIDを持っている、それはあなたがanimal-info div要素を選択するためにvar animalContainer=document.getElementsByClassName("animal-info")[0];を使用する必要が動物-情報

出典

2017-02-08 23:00:02 Booboobeaker

この単純なAJAXスクリプトはなぜ機能しないのですか？

答えて

関連する問題