我的功能不起作用

  • Z时代
  • 2024-01-10
  • 分类：问答

单击搜索按钮后，该功能会假设将搜索输入附加到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("/wp-content/uploads/new2022/20220327voicc/142152839.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; 
}

希望这有助于

回答：

如果必须使用表格，那么你需要调用event.preventDefault()在函数第一条语句，（你也需要修改函数定义 - > searchExplore（事件））

否则，请从HTML表单，并简单地使用document.location = 'http://www.google.com/search?q='+input;内searchExplore函数，并且您不需要使用event.preventDefault()以及

以上是 我的功能不起作用 的全部内容， 来源链接： utcz.com/qa/260475.html

回到顶部