html javascript搜索不起作用答案

【问题标题】：html javascript search not workinghtml javascript搜索不起作用
【发布时间】：2014-03-01 08:57:13
【问题描述】：

这是代码：

<style>
.copyrighttoolbox {
  font-size:9px
}
</style>
<script>
function searchFor(searchEngine,searchQuery){
  for (var i = 0; i < searchEngine.length; i++) {
    if (searchEngine[i].type === 'radio' && searchEngine[i].checked) {
      value = searchEngine[i].value;   
    }
  }
  if (value=="google"){
    var x="http://google.com.hk/search?q="+searchQuery;
    window.location.href=x
  }
  if (value=="yahoo"){
    var x="http://hk.search.yahoo.com/search?p="+searchQuery;
    window.location.href=x
  }
  if (value=="bing"){
    var x="http://bing.com/search?q="+searchQuery;
    window.location.href=x
  }
  if (value=="wikipedia"){
    var x="http://en.wikipedia.org/w/index.php?search="+searchQuery;
    window.location.href=x
  }
}
</script>
<form style="border:3px #cccccc dashed;width:400px">
  <select name="searchLoc">
    <option value="google">Google</option>
    <option value="yahoo">Yahoo</option>
    <option value="bing">Bing</option>
    <option value="wikipedia">Wikipedia</option>
  </select>
  <input type="text" name="searchContent">
  <input type="submit" onclick="searchFor(this.form.searchLoc.value,this.form.searchContent.value);return false;" value="Search"><span class="copyrighttoolbox">&nbsp;&nbsp;&nbsp;&nbsp;by tool-box.weebly.com</p>
</form>

这不起作用，提交后的链接变成：

http://tool-box.weebly.com/web-tool.html?searchLoc=google&searchContent=search

我该如何解决这个问题？
任何帮助将不胜感激。

【问题讨论】：

你想达到什么目的？

标签： javascript html search

【解决方案1】：

试试这个。看起来您混淆了一些东西，因为正确的值已经在 searchEngine 变量中。

function searchFor(searchEngine,searchQuery){
  if (searchEngine=="google"){
    var x="http://google.com.hk/search?q="+searchQuery;
    window.location.href=x
  }
  if (searchEngine=="yahoo"){
    var x="http://hk.search.yahoo.com/search?p="+searchQuery;
    window.location.href=x
  }
  if (searchEngine=="bing"){
    var x="http://bing.com/search?q="+searchQuery;
    window.location.href=x
  }
  if (searchEngine=="wikipedia"){
    var x="http://en.wikipedia.org/w/index.php?search="+searchQuery;
    window.location.href=x
  }
}

【讨论】：

【解决方案2】：

Demo: plunker

说明：

您在searchEngine 中循环，而不是仅使用从提交按钮的onclick 传递的值。
由于此用例的性质，我还将其更改为一个 switch，而不是多个 if 语句。
接下来我用 ; 关闭了你所有的 javascript 行，因为有些行丢失了。
最后我在函数顶部声明了var x，这样您就不会收到重复的变量声明警告。

function searchFor(searchEngine,searchQuery){
  var x = "";

  switch(searchEngine)
  {
   case "google":
    x="http://google.com.hk/search?q="+searchQuery;
    alert(x);
    window.location.href=x;
    break;
  case "yahoo":
    x="http://hk.search.yahoo.com/search?p="+searchQuery;
    window.location.href=x;
    break;
  case "bing":
    x="http://bing.com/search?q="+searchQuery;
    window.location.href=x;
    break;
  case "wikipedia":
    x="http://en.wikipedia.org/w/index.php?search="+searchQuery;
    window.location.href=x;
    break;
  }
}

HTML：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <form style="border:3px #cccccc dashed;width:400px">
      <select name="searchLoc">
        <option value="google">Google</option>
        <option value="yahoo">Yahoo</option>
        <option value="bing">Bing</option>
        <option value="wikipedia">Wikipedia</option>
      </select>
      <input type="text" name="searchContent">
      <input type="submit" onclick="javascript:searchFor(this.form.searchLoc.value,this.form.searchContent.value);return false;" value="Search"><span class="copyrighttoolbox">&nbsp;&nbsp;&nbsp;&nbsp;by tool-box.weebly.com</p>
    </form>
  </body>

</html>

CSS：

.copyrighttoolbox {
    font-size:9px
}

【讨论】：

这是什么？ <script src="script.js"></script>
@Jamie plunker 将js、html 和css 分开，因此html 中没有全部内容，这就是它包含它的原因。如果你打开 plunker 你会看到。如果您愿意，您可以将它们全部放回一个文件中，但将其分开允许其他项目使用相同的js。