搜索图标无法调用API？排查前端代码中的新手常见错误

问题场景 #

添加了带id="search-icon"的搜索图标，期望点击时调用API获取搜索结果，但点击功能未生效。相关代码如下：

JavaScript代码 #

const searchForm = document.querySelector('form');
const searchResultDiv = document.querySelector('.search-result');
const container = document.querySelector('.container');
let searchQuery='';
const searchIcon = document.getElementById('search-icon');

searchForm.addEventListener('submit', (e) => {
    e.preventDefault();
    searchQuery = e.target.querySelector('input').value;
    fetchAPI();
}) 

 searchIcon.addEventListener('click', (search) => {
    searchQuery = search.target.querySelector('input').value;
    fetchAPI();
})

HTML代码 #

<head>
 <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
</head>
<div class="container">
            <div class="logo" style="cursor: pointer">
                <img src="/Images/logo img.png">
                <h1 class="brand">Recipe App</h1>
            </div>
            <form>
                <input type="text" placeholder="Find Yummy Recipes...">
                <i class='bx bx-search' id="search-icon" style="cursor: pointer;"></i>
            </form>
            <div class="search-result">
                 <!-- <div class="item">
                    <img src="/Images/Food-1.jpg" alt="">
                    <div class="food-details">
                        <h1 class="title">This is a Recipe</h1>
                        <a class="view-button" href="#">View Recipe</a>
                    </div>
                    <p class="item-data">Calories: 120</p>
                </div>    -->
            </div>
        </div>

错误原因 #

点击图标时，事件回调里的search.target是<i>标签本身，这个标签内部并没有子元素<input>，所以search.target.querySelector('input')会返回null，无法获取输入框的值，导致后续的fetchAPI()无法正常执行。

修正方案 #

直接从表单节点获取输入框的值，有几种简单的实现方式：

方式一：复用已获取的searchForm变量 #

修改图标点击事件的代码：

searchIcon.addEventListener('click', () => {
    searchQuery = searchForm.querySelector('input').value;
    fetchAPI();
})

方式二：直接查询表单内的输入框 #

如果不想依赖searchForm变量，也可以直接选择：

searchIcon.addEventListener('click', () => {
    searchQuery = document.querySelector('form input').value;
    fetchAPI();
})

方式三：复用表单提交逻辑（推荐） #

直接触发表单的提交事件，复用已写好的表单提交逻辑，避免代码重复：

searchIcon.addEventListener('click', () => {
    searchForm.dispatchEvent(new Event('submit'));
})

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