Looking to modify href based on click and AddEventListener

Question

I'm trying to modify a URL based on the user either (or both) clicking one of 3 text links and/or entering a keyword into a text input. Currently, I have it working, but doing both overwrites the other. For example, if I click on "Scholarships," it looks good. If I enter a word into the text input, it works but overwrites my previous selection. Please be kind, as I'm new to JS.

A CodePen:

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

My 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

Try to reuse code, for example create a function that updates the link from both actions.

example:

function updateLink() {      
    var href = '';

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

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

complete example: https://codepen.io/anon/pen/ooEywW

Answer 2

Well yes, the change event is firing and is running the second block of code ( input.addEventListener("change", function() { ) that sets it without the type. I'd recommend setting variables outside of those events, and then changing the HREF with a separate code block:

$(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();
    });
});

Also I'm not sure why you're using document.querySelector when you're already using jQuery. Why not just do $("#search-input") ?