Toggle button by passing jquery variable

Question

I have in my html:

<input type="button" value="Start L/D" id="start_ld" name="start_ld" onclick='return(toggle_server_create("start_ld", "stop_ld", false));' />
<input type="button" value="Stop L/D" id="stop_ld" name="stop_fx_ld"  style="display:none;" onclick='return(toggle_server_create("start_ld", "stop_ld", true));' />

In my javascript/jquery:

  function toggle_server_create (start_id, stop_id, state){
    var query = '#' + start_id +',' + '#' + stop_id;
    var query_stop = '#' + stop_id
    var query_start = '#' + start_id
    // console.log(state);
    // console.log(query_stop);

    $(query).click(function() {
      // console.log(query_start);
      // console.log (this.name);
      if ((this.name === start_id) && $(this).is(":visible") && state==false) {        
         console.log("Show stop")
          $(query_stop).show();             
      } 
      else if ((this.name === stop_id) && $(this).is(":visible") && state == true) {
        console.log("Show start")
          $(query_start).show();
      }

       $(this).hide();        

    });
  }

The toggle_server_create should accept the jQuery variables and toggle between start and stop accordingly. However, it doesn't function that way but instead has to be clicked twice to see the button changed and when clicked again it disappears. I'm new to JavaScript and I'm not sure how to fix this.

Is your jQuery wrapped in a document ready function or at the end of the document? — j08691
– j08691, Commented Jun 20, 2016 at 21:12

Rob Louie · Accepted Answer · 2016-06-20 21:29:22Z

1

Your issue is a result of setting a click handler only after the user clicks the button. When your button is clicked toggle_server_create is run. When it runs, it creates a click handler for the two buttons that says, "when you click this button, execute everything in this function.

So, the first time you do this only your query variables are set, and then a click handler is created that will execute whenever one of those buttons is set. That is why the second time you click it works.

The code is a bit confusing so I'm not 100% sure what you are trying to accomplish, but that is what is causing it to only run on the second click.

If you are truly trying to just toggle between the buttons, consider something like this: https://jsfiddle.net/bb14xn7z/1/

Where your html is:

<input type="button" value="Start L/D" id="start_ld" name="start_ld"/>
<input type="button" value="Stop L/D" id="stop_ld" name="stop_fx_ld"  style="display:none;"/>

And your javascript is:

$(function() {
  $("#start_ld").click(function() {
    $(this).hide();
    $("#stop_ld").show();
  });

  $("#stop_ld").click(function() {
    $(this).hide();
    $("#start_ld").show();
  });
});

Notice how I do not set onclick in the html, and instead set up the click handler in javascript on page load.

edited Jun 20, 2016 at 21:29

answered Jun 20, 2016 at 21:17

Rob Louie

2,6911 gold badge23 silver badges27 bronze badges

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

5 Comments

Wayne Morris Over a year ago

Thanks for the response. I'm trying to use a function that accepts parameter and performs the onclick function. In other words, if there are several different inputs with different ids/values/names, I want to just pass the respective input id into the function. Hence the function toggle_server_create(). Therefore, I could have a different set of input where one has id=start_ld, another start_id and another start_md and you just pass the id into the function.

Rob Louie Over a year ago

Ok, in that case you could just remove the "$(query).click(function() {" line and it's closing brackets so the code that's inside there actually executes instead of it setting up a click handler for the next time it's clicked. Or check this out for maybe an easier way? jsfiddle.net/bb14xn7z/2

Wayne Morris Over a year ago

That's more like it @Rob. Thanks.

Medda86 Over a year ago

@Wayne Morris did you check my example?

Wayne Morris Over a year ago

@Medda86, I looked at it but I didn't get a chance to test it by adding extra id variables. It only had just the start/stop input for one id. The intent was to have a function that is able to pick id from several different ids defined in the hmtl as I pointed out to Rob earlier instead of a long line of if/else statement.

kirinthos · Accepted Answer · 2016-06-20 21:22:32Z

0

there are two problems here, HTML doesn't use apostrophe for attribute values

<input type="button" value="Start L/D" id="start_ld" name="start_ld" onclick="return toggle_server_create('start_ld', 'stop_ld', false));" />

and you don't have to pass those IDs since they're static, you could store them in a variable in the JavaScript or hardcode them into the function to give more flexibility

answered Jun 20, 2016 at 21:22

kirinthos

4522 silver badges9 bronze badges

1 Comment

kirinthos Over a year ago

sorry I guess the second isn't really a problem just a suggestion

Medda86 · Accepted Answer · 2016-06-20 21:27:50Z

0

You can do it with jquery simple as this :)

https://jsfiddle.net/p1tmaoh7/

html

<div class="buttons">
   <input type="button" value="Start L/D">
   <input type="button" value="Stop L/D" style="display:none;">
</div>

jquery

 $(document).ready(function(){
       $('.buttons input').click(function(){
          $('.buttons input').toggle();
       });
    });

answered Jun 20, 2016 at 21:27

Medda86

1,6501 gold badge13 silver badges19 bronze badges

Collectives™ on Stack Overflow

Toggle button by passing jquery variable

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related