javascript - JS 输入按键事件 - 无法读取 null 的属性 'addEventListener'

Question

我为我的网站创建了一个搜索功能，最初只是将其设置为 Form Element使用POST将变量发送到我的搜索页面。然而，这只会给我一个简单的 URL search.php 。因此，如果单击某些内容然后返回，则不会发布变量，因此不会再有搜索结果。

我想改进这一点，这样如果他们点击某些内容并返回，它将返回到 search.php?term=search%20term 的 URL。然后将其视为 GET变量，因此它将再次显示结果，并且可用于直接在 URL 栏中搜索某些内容。

(注意:我重写了规则，将 search.php?term=search%20term 更改为 search/search%20term 。我还有两个搜索栏，一个用于移动设备，一个用于桌面设备)

所以我将代码更改为以下内容:

function search(x){
    if(x=="search"){
        var search_term = document.getElementById('searchbox').value;
    }else if(x=="mini_search"){
        var search_term = document.getElementById('minisearchbox').value;
    }
    if(search_term != ""){
        window.location.href = "search/"+search_term;
    }
}

<div id="search">
    <input type="text" placeholder="Product Search" name="search" id="searchbox">
    <input type="image" src="media/search.png" class="search_button" name="search_button" onclick="search('search'); return false;">
</div>
<div id="minisearch">
    <input type="text" placeholder="Product Search" name="search" id="minisearchbox">
    <input type="image" src="media/search.png" class="search_button" name="search_button" onclick="search('mini_search'); return false;">
</div>

这按预期工作正常，但显然现在使用 return false声明当用户按enter时它不会搜索我希望他们能够做到这一点。

所以我尝试添加以下代码:

document.getElementById('searchbox').addEventListener('keypress', function(key){
    if(key.keycode==13){
        search(search);
    }
});
document.getElementById('minisearchbox').addEventListener('keypress', function(key){
    if(key.keycode==13){
        search(mini_search);
    }
});

但是，我现在收到错误消息 Uncaught TypeError: Cannot read property 'addEventListener' of null我不确定是什么原因造成的。

Answer 1

如果具有该 ID 的元素确实存在，则脚本可能会在 DOM 加载之前运行。

尝试将代码包装在:

document.addEventListener("DOMContentLoaded", function(event) { 
  // Your code here
});