[英]Looking to modify href based on click and AddEventListener
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. 我正在尝试根据用户(或两者)单击3个文本链接之一和/或在文本输入中输入关键字来修改URL。 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. 请客气,因为我是JS新手。
A CodePen: CodePen:
https://codepen.io/admrbsn/pen/QOQmMN https://codepen.io/admrbsn/pen/QOQmMN
My JS: 我的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;
});
});
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 完整示例: https : //codepen.io/anon/pen/ooEywW
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: 好吧,是的,change事件正在触发并且正在运行第二个代码块( 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();
});
});
Also I'm not sure why you're using document.querySelector
when you're already using jQuery. 另外,我不确定在已经使用jQuery时为什么要使用document.querySelector
。 Why not just do $("#search-input")
? 为什么不只是$("#search-input")
呢?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.