时间戳

首页 > 解决方案 > JS 输入按键事件 - 无法读取 null 的属性“addEventListener”

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

问题描述

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

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

（注意：我已重写规则以更改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，我不确定是什么原因造成的。

标签： javascripthtmldom-eventsaddeventlistener

解决方案

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

尝试将代码包装在：

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

推荐阅读