javascript onclick change onclick to new function

Question

I need to be able to change the onclick event of an id so that once it has been clicked once it executes a function which changes the onclick event

Here is my code: 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()';
    }

and here is the 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>

Thanks

code does not change the onclick event, i wanted to know if i was calling/defining it wrong — Adam
– Adam, Commented Dec 12, 2013 at 16:09

Raymond Elferink · Accepted Answer · 2013-12-12 16:09:13Z

2

Change your code in two places to reference the new functions directly, like:

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

answered Dec 12, 2013 at 16:09

Raymond Elferink

2331 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Krish R · Accepted Answer · 2013-12-12 16:10:14Z

2

Can you try this,

      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";
            }

        }

answered Dec 12, 2013 at 16:10

Krish R

22.7k7 gold badges54 silver badges60 bronze badges

1 Comment

Adam Over a year ago

thanks, that ws going to be my next attempt to try and fiddle with the js code :P

SteveP · Accepted Answer · 2013-12-12 16:11:26Z

0

You were nearly right. You are settingthe onclick to a string rather than a function. Try:

in showSearchBar()

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

in hideSearchBar()

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

answered Dec 12, 2013 at 16:11

SteveP

19.2k9 gold badges49 silver badges62 bronze badges

Comments

Vishal Patel · Accepted Answer · 2013-12-12 16:16:54Z

0

You do not need to create two function. Just create one function and using if condition you can show and hide the form tag..

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';
            }

        }

answered Dec 12, 2013 at 16:16

Vishal Patel

9735 silver badges12 bronze badges

Comments

Thomas Cheney · Accepted Answer · 2013-12-12 16:25:00Z

0

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

You can wrap up both functions into one by adding a check to the current condition of the element and applying your style based on that condition. Doesn't actually change the function but doesn't need to as there is now only one functon performing both actions.

answered Dec 12, 2013 at 16:25

Thomas Cheney

3883 silver badges12 bronze badges

Comments

Manwal · Accepted Answer · 2013-12-12 16:25:02Z

0

With javascript you can check and perform 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";
            }

        }

or if you may go for jquery there is better solution toogle

Like:

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

Fiddle is example

edited Dec 12, 2013 at 16:25

answered Dec 12, 2013 at 16:19

Manwal

23.9k15 gold badges65 silver badges95 bronze badges

Comments

Mechame · Accepted Answer · 2013-12-12 16:49:29Z

0

Here is an option that uses jQuery:

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

http://jsfiddle.net/PuTq9/

answered Dec 12, 2013 at 16:49

Mechame

909 bronze badges

Collectives™ on Stack Overflow

javascript onclick change onclick to new function

7 Answers 7

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related