Switching панель поиска на основе радио-кнопки с помощью JavaScript

Question

Так у меня есть HTML вниз договор (я думаю), как это делает дисплей двумя кнопками и может легко щелкать через них:

<form> 
    <input type="radio" name=searchOption value="one" > One Search 
    <input type="radio" name=searchOption value="two" > Two Search<br> 
    <onClick="changeScope(one)> 
</form> 

Я использую макросы, I имеют идентификатор div id внутри самой страницы Confluence (oneSearch, twoSearch). У меня также есть twoSearch style = display: none

Моя страница отображает один поиск, но не два, что я хочу. Я думаю, что мой JavaScript - это то, что не приводит к переключению поисковых баров.

Вот мой JavaScript:

<script type="text/javascript"> 
function changeScope() { 
    document.getElementById('oneSearch').style.display = "none"; 
} 
</script> 

Answer 1

Я никогда не использовал Confluence. Но в стандартном JavaScript это должно сработать.

<form> 
    <input type="radio" name=searchOption value="one" onclick="changeScope('oneSearch','twoSearch');"> One Search 
    <input type="radio" name=searchOption value="two" onclick="changeScope('twoSearch','oneSearch');" > Two Search<br> 
</form> 

<script type="text/javascript"> 
function changeScope(elemToShow,elemToHide) { 
    document.getElementById(elemToShow).style.display = "block"; 
    document.getElementById(elemToHide).style.display = "none"; 
} 
</script> 

Answer 2

Если я вас правильно понял, вы хотите, чтобы связать панель поиска с кнопкой радио и отобразить его.

document.getElementById("cat").addEventListener('click', function(){ 
 
    document.getElementById("oneSearch").style.display = "block" 
 
    document.getElementById("twoSearch").style.display = "none" 
 

 
}); 
 

 
document.getElementById("dog").addEventListener('click', function(){ 
 
    document.getElementById("oneSearch").style.display = "none" 
 
    document.getElementById("twoSearch").style.display = "block" 
 

 
});

#oneSearch, #twoSearch{ 
 
    display: none; 
 
    }

<input id="cat" type="radio" name="animal" value="cat"> 
 
<label>Cat</label><br> 
 
<input id="dog" type="radio" name="animal" value="dog"> 
 
<label>Dog</label><br> 
 
<input type="text" id="oneSearch" placeholder="cat search"><br> 
 
<input type="text" id="twoSearch" placeholder="dog search">