当我以 html 形式通过 "onchange" 调用它时，为什么我的 JS 函数不工作？

Question

好的，我应该先说我对 JS 很陌生，HTML。

我正在尝试编写一个简单的页面，它将用户输入的值输入到表单中，并使用它通过我的 findArtist() 函数调用 Spotify api。我已经用 npm 设置了项目，并在节点模块目录和所有这些东西中有适当的依赖关系。
这是我的代码：

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

当我在搜索栏中键入内容时，我希望在我的浏览器控制台中看到调用，由于 findArtist()，应该在其中记录 JSON，但没有任何反应。这是因为我在应该使用纯 JS 的时候尝试使用节点吗？我是否必须设置服务器才能拨打电话？我对我的实际问题是什么感到很困惑。

我想补充一点，我意识到使用 onchange 调用我的函数会使我超过我的 api 限制，因此关于调用函数的更好方法的建议是也很感激。

感谢您的帮助。

Answer 1

onchange 仅在您失去焦点或文本框模糊后检测更改。正如 this 回答所说 oninput 可能只是正确的查找方法。

当我以 html 形式通过 "onchange" 调用它时，为什么我的 JS 函数不工作？

Why isn't my JS function working when I call it through "onchange" in an html form?

html

javascript

spotify