我的按键事件可能有什么问题？答案

【问题标题】：What could be wrong with my keypress event?我的按键事件可能有什么问题？
【发布时间】：2021-09-09 06:24:27
【问题描述】：

我正在尝试制作一个天气应用程序，并使用来自 openweathermap 的 API，我像这样从网络上复制了 baseurl，但它目前无法正常工作......

const api = {
    key:"03173bc8739f7fca249ae8d681b68955"
    baseurl:"https://home.openweathermap.org/api_keys"
}
const searchbox=document.querySelector('.search-box');
searchbox.addEventListener('keypress', setQuery)

function setQuery(evt){
    if (evt.keyCode==13)
        //getResults(searchbox.value)
    console.log(searchbox.value)
}

所以当我在搜索框中输入内容时，控制台没有显示任何内容... 这是我的 html 文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> </title>
    <link rel="stylesheet" href="weather.css">
</head>
<body>
    <div class="app-wrap">
        <header>
            <input type="text" autocomplete="off" class="search-box" placeholder="Search for a city...">
        </header>
        <main>
            <section class="location">
                <div class="city">HCM City, Viet Nam</div>
                <div class="date">Friday 25 June 2021</div>
            </section>
            <div class="current">
                <div class="tempt">15<span>°C</span></div>
                <div class="weather">Sunny</div>
                <div class="high-low">13°C / 16°C</div> 
                
            </div>      
            
        </main>
    </div>  




    <script src="weather.js"></script>
</body>
</html>

baseurl有什么问题吗，谁能告诉我？

【问题讨论】：

如果你没有在引用 .search-box 周围加上引号，javascript 认为你正在传递一个像 .search-box = "something" 这样的变量，这当然没有意义。 ".search-box" 告诉 javascript 准确查找该字符串。
是的，我确实纠正了它，但控制台仍然在 baseurl 宣布错误...
const api = { key:"03173bc8739f7fca249ae8d681b68955", baseurl:"https://home.openweathermap.org/api_keys"} - 你少了逗号

标签： javascript dom-events keypress base-url

【解决方案1】：

用“”包裹选择器

const searchbox = document.querySelector(".search-box");

同时更正您的 api obj：

const api = {
key: "03173bc8739f7fca249ae8d681b68955",
baseurl: "https://home.openweathermap.org/api_keys"

}

【讨论】：

是的，我确实纠正了它，但控制台仍然在 baseurl 宣布错误...
我编辑了答案，您忘记在键值后添加逗号。

【解决方案2】：

您错过了在 querySelector 中添加单引号。

const searchbox=document.querySelector('.search-box'); // 已更正

您还需要更新 API 对象

const api = { 
   key:"03173bc8739f7fca249ae8d681b68955",
   baseurl:"https://home.openweathermap.org/api_keys" 
}

【讨论】：

是的，我确实纠正了它，但控制台仍然在 baseurl 宣布错误...