ansaurus

Question

Multiple IF's and ELSE IF's in javascript

Answer 1

A:

Generally speaking, when you have a lot of if/else-if's, you consider replacing them with a switch/case statement.

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

Now, this wouldn't necessarily be appropriate for your situation, as the type of seat is a separate condition from its position (front/middle/back).

There may be a more elegant approach than your code, but I'm not completely understanding the context. What are you doing with this array?

George Marian 2010-07-13 01:27:12

The array is going to be written to a text file when the user chooses to save it. The whole document is going to be used to turn floor plan seat positions on a scanned image into digital, moveable positions (pixel coordinates is the output at this stage). Thanks

IceDragon 2010-07-13 01:35:51

@Carl Manaster Thank you. Your pickiness seems to be as strong as mine. :)

George Marian 2010-07-13 01:53:57

Answer 2

+4 A:

I would build up the string that describes the chair with a comparatively small number of if statements, and then call the 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 easily be extended to account for additional groups of blocks.

JGB146 2010-07-13 01:39:39

Would "desc = "BN, "+desc;" not add both "desc"'s, e.g. itself and the other one? Or would it just add the other one? Thanks

IceDragon 2010-07-13 01:44:43

@IceDragon Both desc's? The other one? huh? Follow the string. It starts empty, if it's a wheelchair seat, it prepends that to the empty string (that's unnecessary, as a normal seat doesn't note that it's a normal seat) and, it will prepend one of "BN, " or "MN, " or "FN, " Note, that there would be an unnecessary comma for normal seats.

George Marian 2010-07-13 01:51:48

@IceDragon: I think this is what you're asking: The right side (valuation) is computed before the assignment, so it only adds whatever the value was before the line is executed. Let me know if that doesn't answer your question or make sense.

JGB146 2010-07-13 01:53:43

@JGB146 Ah, yes. That seems like the best interpretation.

George Marian 2010-07-13 01:55:34

Got it, thanks!

IceDragon 2010-07-13 01:56:13

@George Thanks for mentioning the comma. That's an artifact of representing things with a comma at the end. He can add more complex logic to eliminate it if need be, or the representation can change to something that doesn't have a deliminator between the "BN" and the "Wheelchair". Also, the order can be tweaked according to the ultimate desired value.

JGB146 2010-07-13 01:58:08

Answer 3

A:

Make the value what you want to appear in the result string. If you want 'MN' make the value 'MN'.

Then instead of writing an if statement for each possible state you could loop through the input objects to find the one that is checked.

Get all the inputs from each for like so...

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

Then loop through each and find the one that's checked. Then just concat the value attributes to make your result string.

jasongetsdown 2010-07-13 01:49:09

Answer 4

+2 A:

You are right, IceDragon, it doesn't make sense to use multiple if/else's, because every single time you add options, you'll have to rewrite your code. There are a number of 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>

Notice that in the selections object, we're keeping track of the selections that the user has made so far. Then when the user clicks the image (or whatever triggers the code you are working on), the function simply formats the values already collected.

The one drawback to the way I have written this code is that browsers tend to cache the state of the radio buttons, so a radio button may be already selected, but the chose() function wasn't called. One quick and dirty workaround is to add an ID to the form tag and run this on page load:

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

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

Mark Eirich 2010-07-13 02:16:49

ansaurus

tags:

views:

answers:

Multiple IF's and ELSE IF's in javascript

related questions