All geek questions in one place

Multiple IF and ELSE IF in javascript

So, what falls into this array depends on several radio boxes. I have this for standard and wheelchairs:

if(document.getElementById('standardseat').checked) { //Standard seat is checked seatsArray.push(e.posX, e.posY); } else if(document.getElementById('wheelchairseat').checked) { //Wheelchair seat is checked seatsArray.push("Wheelchair " + e.posX, e.posY); }

And this is the equivalent form code:

 <input id="standardseat" type="radio" name="seat" value="standard" /> Standard seat <input id="wheelchairseat" type="radio" name="seat" value="wheelchair" /> Wheelchair seat

But I want to add some more radio boxes that are separate from the standard wheelchair:

 <input id="backnave" type="radio" name="area" value="backnave" /> Back Nave <input id="frontnave" type="radio" name="area" value="frontnave" /> Front nave <input id="middlenave" type="radio" name="area" value="middlenave" /> Middle nave

And I want this to include too. To explain, if the user has set the mark “Place for wheelchair” and “Middle hub”, the push should be output (“MN, Wheelchair” + e.posX, e.posY). Is there a way to do this without manually turning on a lot of other things, if for each possible result (maybe I want to add a third set of radio boxes)?

Thanks!

+4
source share
4 answers

I would build a line that describes a chair with a relatively small number of if , and then calls push at the end.

So something like:

 var desc = ""; if(document.getElementById('wheelchairseat').checked) { //Wheelchair seat is checked desc = "Wheelchair "+desc; } if(document.getElementById("backnave").checked) { desc = "BN, "+desc; } else if(document.getElementById("middlenave").checked) { desc = "MN, "+desc; } else if(document.getElementById("frontnave").checked) { desc = "FN, "+desc; } seatsArray.push(desc + e.posX, e.posY);

This can be easily expanded to accommodate additional block groups.

+12
source

You are right, IceDragon, it makes no sense to use a few if / else, because every time you add parameters, you will have to rewrite your code. There are several ways to avoid this. Here is just one approach:

 <html><body> <form> <p> <input type="radio" name="seat" onclick="chose(this, 'Standard')" /> Standard seat <input type="radio" name="seat" onclick="chose(this, 'Wheelchair')" /> Wheelchair seat </p><p> <input type="radio" name="area" onclick="chose(this, 'BN')" /> Back Nave <input type="radio" name="area" onclick="chose(this, 'FN')" /> Front nave <input type="radio" name="area" onclick="chose(this, 'MN')" /> Middle nave </p> </form> <script> // make sure to put these in the order you wish them to appear in the output var selections = { area: '', seat: '' }; var seatsArray = []; function chose(input, value) { selections[input.name] = value; } // call this function when user clicks the floor plan: function image_clicked(e) { var desc = []; for (var i in selections) if (selections[i] != '') desc.push(selections[i]); seatsArray.push(desc.join(', ') + ' ' + e.posX, e.posY); } </script> </body></html>

Please note that in the selections object we track the choices the user has made so far. Then, when the user clicks on the image (or something else that launches the code you are working on), the function simply formats the values ​​that have already been collected.

The only drawback of how I wrote this code is that browsers usually cache the state of the switches, so the radio button may already be selected, but the select () function has not been called. One quick and dirty workaround is to add an identifier to the form tag and run it when the page loads:

 document.getElementById('form').reset();

Where 'form' is the attribute of the form tag ID.

+3
source

Generally speaking, when you have a lot of if / else-if, you can replace them with a switch / case statement.

http://www.javascriptkit.com/javatutors/switch.shtml

Now this will not necessarily be suitable for your situation, as the type of seat is a separate state from its position (front / middle / rear).

It may be a more elegant approach than your code, but I don't quite understand the context. What are you doing with this array?

+1
source

Make value what you want to display in the result line. If you want "MN" to make the value "MN".

Then, instead of writing an if for each possible state, you can skip input objects to find the one that is marked.

Get all the inputs from each so that ...

 var chairFormElems = document.getElementById('chairFormId').elements; var naveFormElems = document.getElementById('naveFormId').elements;

Then swipe through each and find the one that has been checked. Then simply attach the value attributes to create your own resulting string.

0
source

Source: https://habr.com/ru/post/1315471/

More articles:


All Articles