-1

Okay, I should preface this by saying I'm pretty new to JS and HTML.

I am attempting to write a simple page that will take the value a user types into the form and use it to make a call to the Spotify api via my findArtist() function. I've set the project up with npm and have the proper dependencies in the node-modules directory and all of that stuff.
Here is my code:

<!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>

When I type something in the search bar, I expect to see the call occur in my browsers console, where the JSON should be logged thanks to findArtist(), but nothing happens. Is this because I am attempting to use node when I should be using plain JS? Do I have to setup a server to make the call? I'm rather confused as to what my actual problem is.

I would like to add that I realize using onchange to call my function is going to put me over my api limit, so a suggestion on a better way to call the function would be appreciated as well.

Thanks for the help.

mscdex
  • 104,356
  • 15
  • 192
  • 153
Nosreme
  • 11
  • 4
  • 2
    Possible duplicate of [Best way to track onchange as-you-type in input type="text"?](http://stackoverflow.com/questions/574941/best-way-to-track-onchange-as-you-type-in-input-type-text) – sabithpocker Apr 06 '16 at 19:14
  • Use `input` event. And avoid `inline-event-binding`..use `ELEMENT.addEventListener('input', HANDLER)` instead.. – Rayon Apr 06 '16 at 19:16
  • 1
    Open your browser's developer tools. Look at the error console. You haven't defined the `spotifyApi` variable. – Quentin Apr 06 '16 at 19:18
  • @Quentin for some reason I wasn't getting an error in my browsers console before. However when I change the `onchange` to `oninput` as suggested below, you're right. I do get an error. Thanks. – Nosreme Apr 06 '16 at 19:28

1 Answers1

0

onchange detects changes only after you lose focus or blur from the textbox. As this answer says oninput might just be the right method to look upto.

Community
  • 1
  • 1
Sukhmeet Singh
  • 303
  • 2
  • 14