さて、私は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の限界を超えてしまいますので、この機能を呼び出すより良い方法についての提案も高く評価されます。
ありがとうございました。
入力タイプ= "text"でon-you-typeのonchangeを追跡する最良の方法?](http://stackoverflow.com/questions/574941/best-way-to-track-onchange-as) -you-type-in-input-type-text) – sabithpocker
'input'イベントを使用します。 'インラインイベントバインディング' ..use 'ELEMENT.addEventListener( 'input'、HANDLER)'を避けてください。 – Rayon
ブラウザのデベロッパーツールを開きます。エラーコンソールを見てください。あなたは 'spotifyApi'変数を定義していません。 – Quentin