Javascript HTML-按钮-在搜索栏中单击一次

我正在寻找以下解决方案：我有一个带有以下代码的搜索栏：

<input autofocus class="form-control" style="width:40%" type="search" id="myInput" placeholder="Enter keywords here...">

如何集成此解决方案：

HTML

---

我认为这会解决问题：

<input type="button" id="fruit" value="Banana">

document.getElementById("fruit").addEventListener("click", function(){
       document.getElementById("myInput").value = this.value;
});

document.getElementById（“fruit”）.addEventListener（“单击”，函数（）{
document.getElementById（“myInput”）.value=this.value；
});

HTML

<input autofocus class="form-control" style="width:40%" type="search" id="myInput" placeholder="Enter keywords here...">
<button onclick="addval('Banana')">Banana</button>
<button onClick="addval('Apple')">Apple</button>

---

您需要将按钮的值添加到输入文本中。 首先，创建一个函数来处理单击按钮的操作，完成后，将按钮的值传递给输入字段

const clickButtonHandler=（evt）=>{
document.querySelector（'.form control'）。value=evt.value；
}

尝试以下操作：

function myFunction() {
   document.getElementById("myInput").value = "Banana";
}

对于按钮：

<button type="button" onclick="myFunction()">Banana</button>

香蕉

---

非常感谢！这确实有效，但是我有一些其他脚本，所以我无法使用此解决方案。然而，这不是我提到的，所以我想表达我的感激之情。这也很有效，但是因为我有大约15个按钮，这将创建很多脚本。不过，谢谢。这是对我来说最简单的解决方案，它不干扰我的代码，但做了它需要做的事情。非常感谢。你知道如何将其与听力事件集成（我已经将上面的代码放在inital post.TIA中！）是的，你也可以这样做，请检查我的更新答案

<input type="button" id="fruit" value="Banana">

document.getElementById("fruit").addEventListener("click", function(){
       document.getElementById("myInput").value = this.value;
});

<input autofocus class="form-control" style="width:40%" type="search" id="myInput" placeholder="Enter keywords here...">
<button onclick="addval('Banana')">Banana</button>
<button onClick="addval('Apple')">Apple</button>

function addval(e){
   var input = document.getElementById('myInput');
   input.value += ' '+e; 
}

function myFunction() {
   document.getElementById("myInput").value = "Banana";
}

<button type="button" onclick="myFunction()">Banana</button>