Question

点击搜索按钮后，该功能可以将搜索输入附加到Google URL。然而，似乎该功能忽略了该变量，因为它重定向到Google的主页，尽管在搜索栏中输入了某些内容。

＆＃13;

document.getElementById('searchbtn').onclick = searchExplore;
function searchExplore () {
 var input = document.getElementById('searchbar').value;   
 document.getElementById('searchform').action = 'http://www.google.com/search?q='+input;
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

HTML file:

HttpException

JS File:

<form id="searchform" action="" method="get" onsubmit="return searchExplore()">
     <input id="searchbar" type= "search" placeholder="Search & Explore..."/>
     <input type="submit" />
</form>

Hope this helps

Answer 2

If you must use form, then you need to call for as first statement in the function, (also you need to modify function definition to -->searchExplore(event))

Otherwise, remove the form from html, and simply use event.preventDefault() inside the searchExplore function, and you need not use document.location = 'http://www.google.com/search?q='+input; as well

我的功能不起作用

2 个答案: