clickとAddEventListenerに基づいてhrefを変更するには

Question

3つのテキストリンクのいずれかをクリックするか、またはキーワードをテキスト入力に入力することで、ユーザーに基づいてURLを変更しようとしています。現在、私はそれを動作させていますが、両方を実行するともう一方を上書きします。たとえば、「奨学金」をクリックすると、それはよさそうです。テキスト入力に単語を入力すると、それは動作しますが、前の選択を上書きします。親切にしてください、私はJSには新しい人です。

A CodePen：

https://codepen.io/admrbsn/pen/QOQmMN

マイJS：

$(document).ready(function() { 
    var select = $('.custom-option'); 
    var input = document.querySelector("#search-input"); 

    select.click(function(e) { 
     var type = e.target.getAttribute('data-value'); 
     var link = "/search/" + type + "/?searchterm="; 
     document.querySelector('#searchLink').href = link; 
    }); 

    input.addEventListener("change", function() { 
     var keyword = this.value; 
     var link = "/search/?searchterm=" + keyword; 
     document.querySelector('#searchLink').href = link; 
    }); 
}); 

Answer 1

例えば両方のアクションからリンクを更新関数を作成し、コードを再利用するようにしてください。

例：

function updateLink() {  
    var href = ''; 

    if (link) 
     href = "/search/" + link + "/?searchterm=" + text; 
    else 
     href = "/search/?searchterm=" + text; 

    document.querySelector('#searchLink').href = href; 
} 

完全な例： https://codepen.io/anon/pen/ooEywW

Answer 2

まあはい、変更イベントが発火しているとタイプすることなく、それを設定するコードの第二のブロック（input.addEventListener("change", function() {）を実行しています。私は、これらのイベントの外で変数を設定することをお勧めします、その後、別のコードブロックでHREFを変更したい：

$(document).ready(function() { 
    var select = $('.custom-option'); 
    var input = document.querySelector("#search-input"); 

    var type = ''; 
    var searchterm = ''; 

    var updateLink = function() { 
     var link = "/search/" + type + "?searchterm=" + searchterm; 
     document.querySelector('#searchLink').href = link; 
    } 

    select.click(function(e) { 
     type = e.target.getAttribute('data-value'); 
     updateLink(); 
    }); 

    input.addEventListener("change", function() { 
     searchterm = this.value; 
     updateLink(); 
    }); 
}); 

すでにjQueryのを使用しているときにdocument.querySelectorを使用している理由も、私はよく分かりません。なぜ$("#search-input")をやってみませんか？