单击搜索按钮后，该函数假设将搜索输入附加到 Google URL。但是，该函数似乎忽略了该变量，因为尽管在搜索栏中输入了某些内容，它仍重定向到 Google 的主页。
document.getElementById('searchbtn').onclick = searchExplore;
function searchExplore () {
var input = document.getElementById('searchbar').value;
document.getElementById('searchform').action = 'http://www.google.com/search?q='+input;
}body{
}
.search{
text-align:center;
background: url("http://dash.ga.co/assets/anna-bg.png");
background-size:cover;
background-position: center;
padding:20px;
}
form{
display:inline-flex;
}
#searchbar{
font-size:35px;
border: 0;
padding: 0px 0 0 20px;
border-radius:20px 0 0 20px;
outline: 0;
font-family: 'Bitter', serif;
}
#searchbtn{
font-size:35px;
border: 0;
padding: 10px;
border-radius: 0 20px 20px 0;
outline: 0;
width: 90px;
cursor: pointer;
}
#searchbar:hover,#searchbar:focus{
box-shadow:-3px 3px 15px;
}
#searchbtn:hover,#searchbtn:focus{
box-shadow:-.1px 3px 15px 1px;
}<!DOCTYPE html>
<head>
<link href="https://fonts.googleapis.com/css?family=Bitter" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="mypen1.css" type="text/css"/>
<title>MJ Search</title>
</head>
<body>
<div class="search">
<form id="searchform" action="">
<input id="searchbar" type= "search" placeholder="Search & Explore..."/>
<button id="searchbtn"><i class="fa fa-search"></i></button>
</form>
</div>
<script type="text/javascript" src="mypen1.js"></script>
</body> 最佳答案
HTML 文件:
<form id="searchform" action="" method="get" onsubmit="return searchExplore()">
<input id="searchbar" type= "search" placeholder="Search & Explore..."/>
<input type="submit" />
</form>
JS 文件:
function searchExplore () {
var input = document.getElementById('searchbar').value;
window.location = 'http://www.google.com/search?q='+input;
return false;
}
希望对你有帮助
关于javascript - 我的功能不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47861237/