为什么我的 JS 函数在 html 表单中通过“onchange”调用时不起作用？

Question

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

我正在尝试编写一个简单的页面，该页面将用户输入到表单中的值，并使用它通过我的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>

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

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

谢谢您的帮助。

Answer 1

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

为什么我的 JS 函数在 html 表单中通过“onchange”调用时不起作用？

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-04-06 19:19:20

为什么我的 JS 函数在 html 表单中通过“onchange”调用时不起作用？

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-04-06 19:19:20

解决方案1
0 已采纳 2016-04-06 19:19:20