创建一个搜索框，使用javascript搜索两个不同的站点

我制作了多个搜索框来搜索外部词典网站。由于站点搜索语法，我不得不使用JavaScript从文本框输入构建url。这段代码运行得非常好：

function prepare\u link\u glosbe（）{
var url_param_gl=document.getElementById（'url_param_gl'）；
var target_link_gl=document.getElementById（'target_link_gl'）；
如果（！url\u param\u gl.value）{
返回false；
}
target_link_gl.href=”https://nb.glosbe.com/en/nb"
target_link_gl.href=target_link_gl.href+'/'+encodeURI（url_参数_gl.value）；
window.open（target_link_gl.href，“_blank”）
}
函数prepare\u link\u dict（）{
var url_param_dict=document.getElementById（'url_param_dict'）；
var target_link_dict=document.getElementById（'target_link_dict'）；
如果（！url_param_dict.value）{
返回false；
}
target_link_dict.href=”https://www.dict.com/engelsk-norsk"
target_link_dict.href=target_link_dict.href+'/'+encodeURI（url_param_dict.value）；
打开（target_link_dict.href，“_blank”）
}

---

首先，从长远来看，有些事情会让你的生活更轻松：

您不需要

this.value='

，只需使用

占位符

属性-它得到了很好的支持

不要使用

创建布局

不要使用属性来分配JS事件处理程序。（因此没有

onclick=

）

现在，如何为两个网站只使用一个文本字段-只需删除第二个字段并将按钮移动到其他地方。下面是一个例子：

//这是我们的搜索输入字段。
const searchValue=document.getElementById（'search_value'）；
//在这里，我寻找所有的搜索按钮，并对它们进行迭代
//与…一起。。。当然，querySelectorAll接受有效的CSS选择器。
for（document.querySelectorAll的let按钮（'.search_按钮'））{
//从按钮获取数据url属性值。
const url=button.dataset.url；
//添加单击事件处理程序，而不是依赖onclick=''
按钮。addEventListener（'click'，函数（）{
//快速字符串替换。。。
const targetURL=button.dataset.url.replace（“%s”，encodeURI（searchValue.value））；
//…现在我们打开新选项卡。
window.open（targetURL，“_blank”）；
});
}

Glosbe（欧洲编号）
Dict（英文编号）