Question

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

我希望改进这一点，所以如果他们点击某些内容然后返回，则会返回到search.php?term=search%20term的网址，然后将其视为GET变量，以便显示结果再次，它可以用于直接在URL栏中搜索某些内容。

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

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

＆＃13;

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;
    }
}

＆＃13;

<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>

＆＃13;

这正如预期的那样正常，但显然现在使用return false语句，当用户按下我希望他们能够执行的enter时，它不会搜索。

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

＆＃13;

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);
    }
});

＆＃13;

但是，我现在收到的错误是Uncaught TypeError: Cannot read property 'addEventListener' of null，我不确定是什么导致这种情况。

对此有任何帮助或帮助将不胜感激。

Answer 1

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

尝试将代码包装在：

中

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

Answer 2

你可能做错了，试试这个，你必须在引号中传递字符串，你错过了那部分

var _search = document.getElementById('searchbox');
_search.addEventListener('keypress', function(key){
  if(key.keyCode==13){
		search('search');
	}
});
var mini_search = document.getElementById('minisearchbox');
mini_search.addEventListener('keypress', function(key){
	if(key.keyCcode==13){
		search('mini_search');
	}
});

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 != ""){
    console.log(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>

JS输入按键事件 - 无法读取属性＆＃39; addEventListener＆＃39;为null

2 个答案: