Javascript OnClick изменить OnClick к новой функции

Question

мне нужно, чтобы иметь возможность изменить событие OnClick из идентификатора, так что, как только она была нажата, когда он выполняет функцию, которая изменяет событие OnClick

Вот мой код: Javascript:

function showSearchBar() 
    { 
     document.getElementById('search_form').style.display="inline"; 
     document.getElementById('searchForm_arrow').onclick='hideSearchBar()'; 
    } 

    function hideSearchBar() 
    { 
     document.getElementById('search_form').style.display="none"; 
     document.getElementById('searchForm_arrow').onclick='showSearchBar()'; 
    } 

и вот HTML:

<!-- Search bar --> 
<div class='search_bar'> 
    <img id='searchForm_arrow' src="images/icon_arrow_right.png" alt=">" title="Expand" width="10px" height="10px" onclick='showSearchBar()' /> 
    <form id='search_form' method='POST' action='search.php'> 
     <input type="text" name='search_query' placeholder="Search" required> 
     <input type='image' src='images/icon_search.png' style='width:20px; height:20px;' alt='S' > 
    </form> 
</div> 

Благодаря

Answer 1

Изменить код в двух местах, чтобы ссылаться на новые функции непосредственно, как:

document.getElementById('searchForm_arrow').onclick=hideSearchBar; 

Answer 2

Вы можете попробовать это,

 function showSearchBar() 
     { 
      if(document.getElementById('search_form').style.display=='none'){ 
       document.getElementById('search_form').style.display="inline"; 
      }else{ 
       document.getElementById('search_form').style.display="none"; 
      } 

     } 

Answer 3

Вы были почти правы. Вы устанавливаете onclick на строку, а не на функцию. Попробуйте:

в showSearchBar()

document.getElementById('searchForm_arrow').onclick=hideSearchBar; 

в hideSearchBar()

document.getElementById('searchForm_arrow').onclick=showSearchBar; 

Answer 4

Вам не нужно создавать две функции. Просто создать одну функцию и использовать, если условие можно показать и скрыть форму тег ..

function showSearchBar() 
     { 
      if(document.getElementById('search_form').style.display=='none'){ 
       document.getElementById('search_form').style.display=''; // no need to set inline 
      }else{ 
       document.getElementById('search_form').style.display='none'; 
      } 

     } 

Answer 5

С помощью JavaScript вы можете проверить и выполнить OPRATION

function SearchBarevent() 
     { 
      if(document.getElementById('search_form').style.display=='none'){ 
       document.getElementById('search_form').style.display="inline"; 
      }else{ 
       document.getElementById('search_form').style.display="none"; 
      } 

     } 

или если вы можете пойти на JQuery есть лучшее решение toogle

Как:

$("#button_id").click(function(){ 
$("#search_form").toggle(showOrHide); 
}); 

Fiddle является примером

Answer 6

function searchBar(){ 
    var x = document.getElementById('search_form').style.display; 
    x = (x == 'inline') ? 'none' : 'inline'; 
} 

Вы можете обернуть обе функции в один, добавив проверку на текущее состояние элемента и применяя свой стиль, основанный на таком состоянии. Фактически это не изменяет функцию, но не нужно, так как теперь есть только один функтор, выполняющий оба действия.

Answer 7

Вот вариант, который использует JQuery:

$('#searchForm_arrow').click(function() { 
    $('#search_form').slideToggle(); 
}); 

http://jsfiddle.net/PuTq9/