私の機能が動作していません

検索ボタンをクリックすると、この機能は検索入力を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>

出典

2017-12-18 Aficionado_MJ

私は最初に 'preventDefault（）'（最初の投稿）が必要だと思ってから、 'action' urlを付けて手動で' submit' – sTx

しかし、とにかく、そのクエリ結果をどこかで見る方法が必要です。それはどうやって？ – sTx

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

希望あなたがしなければならない場合、これは

出典

2017-12-18 07:56:48 Arampg

なぜ虚偽が返されたのですか？ –

https://stackoverflow.com/questions/855360/when-and-why-to-return-false-in-javascript 私の以前の回答は役に立ちましたか？この小さなコードでhtmlファイルを作成し、それが期待される動作かどうかを確認します。 – Arampg

なぜfalseが返されますか？ –

を支援（関数の定義を - > searchExplore（event）に変更する必要があります）を呼び出す必要があります。

それ以外の場合は、document.location = 'http://www.google.com/search?q='+input;を内部で使用してくださいsearchExplore関数を使用する必要はありません。

出典

2017-12-18 08:16:52

event.preventDefault（）はこの状況で何をしますか？ –

あなたの方法を試しました。それはまったく検索しません。私はまだ検索ボタンが何であるかは分かりませんが、たとえば "cat"を検索すると、 "http：//www.google.com/search?q=cat"の代わりに "http://www.google.com/search?q=cat" //www.google.com/search?q= " –

まだ問題に直面している場合は、 –

私の機能が動作していません

答えて

関連する問題