클릭 및 AddEventListener를 기반으로 href를 수정하려는 경우

Question

사용자를 기준으로 URL을 수정하거나 3 개의 텍스트 링크 중 하나를 클릭하거나 키워드를 텍스트 입력에 입력하려고합니다. 현재는 작동하지만 두 작업 모두 다른 작업을 덮어 씁니다. 예를 들어, "장학금"을 클릭하면 잘 보입니다. 텍스트 입력에 단어를 입력하면 작동하지만 이전 선택을 덮어 씁니다. JS에 처음 왔으니 친절하셔야합니다.

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

완전한 예 : 유형없이 설정 음 예, 변경 이벤트가 소성되어 코드 (input.addEventListener("change", function() {)의 제 2 블록을 실행 https://codepen.io/anon/pen/ooEywW

Answer 2

. 나는 그 사건의 외부 변수를 설정 한 다음 별도의 코드 블록으로 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")을 사용하지 않으시겠습니까?