如何让按钮同时响应点击与回车键触发天气API数据请求？

你的问题核心是API请求逻辑只写在了输入框的keypress事件回调里，按钮本身没有绑定执行请求的逻辑：

• 回车触发输入框的keypress事件时，会执行回调里的fetch，所以功能正常；
• 直接点击按钮时，没有任何绑定的事件处理代码，自然不会发起请求。

解决方案：抽离统一的请求逻辑，同时绑定按钮点击与回车事件 #

把天气API请求的逻辑抽成独立函数，让按钮点击和输入框回车都调用这个函数，就能实现两种操作都触发请求的效果。

修改后的HTML代码

<div class="inputdiv">
    <input type="text" placeholder="Enter City, Country" id="cityinput">
    <input type="submit" value="Submit" id="add">
</div>
<script src="./script.js"></script>

修改后的JavaScript代码

let inputval = document.querySelector('#cityinput')
let btn = document.getElementById('add')

// 抽离API请求逻辑为独立函数
function getWeatherData() {
    const cityName = inputval.value.trim();
    if (!cityName) return; // 空输入不发起无效请求
    
    // 替换为你的天气API地址
    fetch('https://你的天气API接口地址')
        .then(res => res.json())
        .then(data => {
            // 这里处理返回的天气数据，比如渲染到页面
            console.log('天气数据:', data);
        })
        .catch(err => {
            // 处理请求错误
            console.error('请求失败:', err);
        });
}

// 给按钮绑定点击事件
btn.addEventListener('click', getWeatherData);

// 输入框回车时触发请求
inputval.addEventListener("keypress", function(event) {
    if (event.key === "Enter") {
        event.preventDefault();
        getWeatherData();
    }
});

额外说明 #

• 新增了输入值的非空判断，避免空输入发起无效请求；
• 完善了fetch的错误捕获逻辑，方便调试排查问题；
• 统一逻辑后，后续修改请求逻辑只需改动一处，维护更方便。

内容的提问来源于stack exchange，提问作者Iared