2016-04-06 9 views
-1

さて、私はJSとHTMLのかなり新しいことを言ってこれを序文にする必要があります。html形式で "onchange"を使用してJS関数を呼び出すと、JS関数が機能しないのはなぜですか?

ユーザーがフォームに入力した値を受け取り、それを使用してfindArtist()関数を使用してSpotify APIに呼び出しを行う簡単なページを作成しようとしています。私はプロジェクトをnpmで設定し、node-modulesディレクトリとそのすべてのものに適切な依存関係を持っています。ここで
が私のコードです:私は検索バーに何かを入力すると

<!DOCTYPE html> 

<html lang="en-US"> 

<head> 
    <meta charset="UTF-8"> 
    <title>My Title</title> 
</head> 

<body> 
    <header> 
     <h1>My Header</h1> 
    </header> 

    <section> 
     <form> 
      Search for an artist! <br/> 
      <input type="text" name="searchrequest" value="" onchange="findArtist()"> 
     </form> 
    </section> 

    <script> 
     function findArtist() { 
      var artistName = document.getElementsByName("searchrequest")[0].value; 
      spotifyApi.searchArtists(artistName) 
       .then(function(data) { 
        console.log(data.body); 
       }, function(err) { 
        console.error(err); 
       }); 
     } 
    </script> 

</body> 
</html> 

、私はJSONがfindArtist()のおかげでログインする必要がありますが、何も起こりません、私のブラウザコンソールで起こる呼び出しを見ることを期待します。これは、私がプレーンJSを使用するべきであるときにノードを使用しようとしているからですか?電話をかけるにはサーバーをセットアップする必要がありますか?私はむしろ私の実際の問題が何であるかについて混乱しています。

onchangeを使用して私の機能を呼び出すことができますが、私のAPIの限界を超えてしまいますので、この機能を呼び出すより良い方法についての提案も高く評価されます。

ありがとうございました。

+2

入力タイプ= "text"でon-you-typeのonchangeを追跡する最良の方法?](http://stackoverflow.com/questions/574941/best-way-to-track-onchange-as) -you-type-in​​-input-type-text) – sabithpocker

+0

'input'イベントを使用します。 'インラインイベントバインディング' ..use 'ELEMENT.addEventListener( 'input'、HANDLER)'を避けてください。 – Rayon

+1

ブラウザのデベロッパーツールを開きます。エラーコンソールを見てください。あなたは 'spotifyApi'変数を定義していません。 – Quentin

答えて

0

onchangeは、テキストボックスからフォーカスまたはぼかしを失った後にのみ変化を検出します。 thisと答えてoninputはちょうどそれを見る正しい方法かもしれません。

+0

これは私の問題を解決するようです!ありがとう! – Nosreme

関連する問題