单个搜索上的三个操作按钮

Question

I am building a website on WordPress, there is a search button as seen below in image.

I want if a user fills "Japan" in search box ...condition:

1. If the user clicks on the search button then show all result of "Japan" in website (which is done)
2. If the user clicks on the YouTube icon then videos related to "Japan" are shown
3. If the user clicks on the Wikipedia Link then all information of "Japan" on Wikipedia is shown.

That means that the user can enter anything in search and then search that keyword:

• on the site, or
• on YouTube, or
• on Wikipedia.

The single keyword should work for all buttons.

Answer 1

Well. First of all, I would try to make it somewhat more clear what you actually want to do. As of this, there might be a risk that I misunderstood you, but if I understood you correctly, this is my answer:

You have three buttons:

Html:

<div>
    <button id="wikiButton">Wiki icon</button>
    <button id="youtubeButton">Youtube icon</button>
    <button id="searchButton">Search locally</button>
</div>

script:

document.getElementById('wikiButton').addEventListener('click', function () {
Do wiki thing
}

document.getElementById('youtubeButton').addEventListener('click', function () {
Do youtube thing
}

document.getElementById('searchButton').addEventListener('click', function () {
Do locally search thing
}

Alternatively you could assign an onclick="doThis()" handler to each button, which each holds a function that does what you want.