Creating a div switch

Question

I am wondering if it is possible to make a div that behaves exactly like a switch? I try to achieve this without using jquery, which many people offer, I checked the network and found it.

my previous way of doing this with javascript, this works for a small number

function Switcher(a,b,c,d,e){ document.getElementById('button1').style.background=a; document.getElementById('button2').style.background=b; document.getElementById('button3').style.background=c; document.getElementById('button4').style.background=d; document.getElementById('button5').style.background=e; } 

with onclick event

 onClick="Switcher(#c5e043,#241009,#241009,#241009,#241009)" 

then each button pressed is switched, I can add a switch test function, but I notice that I may need up to 20, which makes the list very long.

I am wondering if anyone has a simpler solution to this problem? Basically I need a div that behaves like a switch that changes bgcolor or smthg when selected (radio also)

Answer 1

If you want to use div instead of radio buttons to better control your viewing. If you can really use a real radio button, here is what I suggest:

Use real radio buttons labeled:

 <input type="radio" name="rGroup" value="1" id="r1" checked="checked" /> <label class="radio" for="r1"></label> 

Hide css your switches:

 .radios input[type=radio]{ display:none } 

And create a shortcut the way you want. I created a simple jsfiddle that fully demonstrates how to use radio buttons without appearance. Instead, it is a slightly colored square that has changed when it is installed.

Here is jsfiddle

Answer 2

Get onClick of this html onClick using inline javascript - this is bad practice. In your javascript file that you add to the page, add this function:

 var checkboxes = document.querySelectorAll('.button'); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].addEventListener('click', function() { for (var j = 0; j < checkboxes.length; j++) { checkboxes[j].style.background = '#241009'; } this.style.background = '#c5e043'; return false; }); } 

What does this mean, it receives all your buttons (you pointed all your buttons to the button class or something similar, right?) And assigns a click event to each event. The click event goes through all your buttons and resets them to # 241009, then takes the button you clicked on ( this ) and sets it to # c5e043.

Thus, you do not need to create 20 different onClick functions, and you can add or remove buttons without changing the result. You also probably want to create an array that tracks which of the 20 buttons is active, or you can just check which color is active (but it would be better to set up the array).

Also, I know that Qaru hates this, this is exactly what is simplified with the javascript library. Once you get a really good pen in pure javascript, take a look at a library like jQuery or another to simplify this process.

Answer 3

To scale the javascript solution to handle many "buttons", create a class. The class must have a field containing an array of divs. A function is also provided inside the class, such as setDivState (isSelected). Inside the method that handles the click action that should be clicked on the div, run the forEach command on the divs, setting the state of each div.