Похоже, ваш главный вопрос - как вызвать функцию поиска, когда (имитируемый) щелчок происходит по определенному элементу. Атрибут onclick, вероятно, будет работать нормально, но, как правило, он уступает использованию прослушивателя событий .
Непонятно, как предполагались биты вашего более сложного образца кода чтобы соответствовать друг другу, поэтому здесь чистый пример, показывающий, как получить значение элемента ввода (при нажатии ENTER) и передать это значение в функцию поиска .
(Обратите внимание, что имитация На самом деле щелчок не является необходимым, поскольку мы могли бы просто вызвать одну и ту же функцию поиска от обоих слушателей, вместо того, чтобы один слушатель полагался на другого, чтобы инициировать поиск.)
// Defines global variables
const
searchBox = document.getElementById("searchBox"),
btn = document.getElementById("btn"),
haystack = document.getElementById("sentence").textContent.split(" ");
// Calls `handleEnterKeyInSearchBox` when `keyup` event happens in searchBox
searchBox.addEventListener("keyup", handleEnterKeyInSearchBox);
// Calls `handleButtonClick` when `click` event happens on btn
btn.addEventListener("click", handleButtonClick);
// Defines `handleEnterKeyInSearchBox` function
function handleEnterKeyInSearchBox(event){
// Simulates a click on #btn if ENTER is pressed while #searchBox has focus
if (event.keyCode === 13) {
event.preventDefault();
btn.click();
}
}
// Defines `handleButtonClick` function
function handleButtonClick(event){
const needle = searchBox.value; // Gets item to search for
doSearch(needle, haystack); // Calls search function
}
// Defines a search function to use
function doSearch(theNeedle, theHaystack){
// Gets index of word in sentence (or -1 if word is not found)
const index = theHaystack.indexOf(theNeedle);
// Reports result
if(index > -1){
console.log(`Item '${theNeedle}' found at index ${index}`);
}
else{
console.log(`Could not find item '${theNeedle}'`);
}
}
<p id="sentence">The quick brown fox jumps over the lazy dog</p>
<input id="searchBox" />
<button id="btn">Find</button>