Toggle multiple ids with button

Question

I am new beginner in javascript and I realy want to learn it, I am recently tryng to make HTML editor with Codemiror with all posible options and settings. I know that this wil be hard for new beginner but I have faith. So right now am trying to make changable splitpane for the HTML Editor. I have the splitpane "Jquery splitpane" and I want to have the option to change between Horizontal and vertical view. But to do that I wil need to change the "classes" and the "IDS" of the divs that are used for the splitpane. The vertical splitpane have some classes and IDS and the horizontal have others. I found out how to toggle multiple classes at same time with button, but now I have trouble with the "IDS". I have modifiet a script found here in the site, but I cant get it to work. If you guys can help me solve the problem I wil realy appreciate it. So here is the script for toggling the ids:

#red {
  background: red;
}

#blue {
  background: blue;
}

#green {
  background: green;
}

#yellow {
  background: yellow;
}

<button href="#" class="buttontoggle buttontoggle2">changehtmlstyle</button>

<div id="blue" class="toggleelement">This is a div</div>

<div id="green" class="toggleelement2">This is a div</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
  var clickCount = 0;
  $(".buttontoggle").on("click", function() {
    clickCount++;
    $("div.toggleelement").attr("id", clickCount % 2 === 0 ? "blue" : "red");
  });
</script>

<script type="text/javascript">
  var clickCount = 0;
  $(".buttontoggle").on("click", function() {
    clickCount++;
    $("div.toggleelement2").attr("id", clickCount % 2 === 0 ? "blue" : "red");
  });
</script>

I can toggle one of the ids if I delete one of them, but I need more than 4 ids to toggle at same time.

Possible duplicate of [Difference between div id and div class](https://stackoverflow.com/questions/544010/difference-between-div-id-and-div-class) — Steven Goodman, Sep 01 '17 at 18:13
For reference, you can select multiple IDs using jQuery like `$("#red #blue")`. — Steven Goodman, Sep 01 '17 at 18:14

score 0 · Answer 1 · answered Sep 02 '17 at 06:00

You have created two click event functions for the .buttontoggle. Clicking on the button causes both these functions to run. Since each function has a clickCount++, the value of clickCount increases by 2 on each click. Adding 0 by 2 over and over always gives you a multiple of 2 and taking its mod of 2 will always give you 0. This is why you will never see the colors toggle since only one condition is always true.

I am not sure as to why you have written the event twice, but there are a couple of solutions for this. You can use whichever may fit your need. If you are fine with only one click event, then just merge the two events:

var clickCount = 0;
$(".buttontoggle").on("click", function() {
    clickCount++;
    $("div.toggleelement").attr("id", clickCount % 2 === 0 ? "blue" : "red");
    $("div.toggleelement2").attr("id", clickCount % 2 === 0 ? "blue" : "red");
});

Or if you need two functions for any reason, you can remove clickCount++ from one of them.

Toggle multiple ids with button

1 Answers1