using if and else if statements in javascript?

Question

I am trying to find a away (the correct and easy way) to use IF and else IF statements in javascript.

here is what I am trying to do...

at the moment, I am joining 2 input fields value and display them in another input balue like so:

function FillIn() {
  document.getElementById('custom').value = 

'Main Text:' + ' ' +  document.getElementById('inputName').value + ', ' + '1st Text:' + ' ' + document.getElementById('inputName101').value

    ; 
}

so basically the above code will place the values of inputName and inputName101 into the custom input field. this works just fine.

Now, I have 2 radio buttons which I want to display their Values into the custom input field depending on which one is selected/ checked .

for this I am using the following code:

    function FillIn() {
      document.getElementById('custom').value = 

    'Main Text:' + ' ' +  document.getElementById('inputName').value + ', ' + '1st Text:' + ' ' + document.getElementById('inputName101').value

if(document.getElementById('male').checked) {

   + ', ' + 'Type:' + ' ' + document.getElementById('male').value

}else if(document.getElementById('female').checked) {

     + ', ' + 'Type:' + ' ' + document.getElementById('female').value

}

        ; 
    }

however, i am not sure if I am doing this correctly as I don't get the values of radio buttons in the custom input field at all..

Could someone please advise on this?

EDIT:

HTML for radio buttons:

<input id="male" type="radio" name="gender" value="Road Legal" onclick="showhidediv(this);">  

<input id="female" type="radio" checked="checked" name="gender" value="Show Plate" onclick="showhidediv(this);">

Answer 1

Actually, you're doing it wrong, you can't directly concatenate if / else conditions with strings, and the cleaner way to write your code would be

function FillIn() {
    var str = 'Main Text: ';
    str += document.getElementById('inputName').value;
    str += ', 1st Text: ';
    str += document.getElementById('inputName101').value;

    if ( document.getElementById('male').checked ) {
        str += ', Type: ';
        str += document.getElementById('male').value;
    } else if ( document.getElementById('female').checked ) {
        str += ', Type: ';
        str += document.getElementById('female').value;
    }

    document.getElementById('custom').value = str;
}

Answer 2

That won't work as it is... you can't just concatenate strings in and out of if statements as if it was a string. You need to do it like this...

function FillIn() {
  document.getElementById('custom').value = 'Main Text:' + ' ' +  
    document.getElementById('inputName').value + ', ' + '1st Text:' + ' ' + 
    document.getElementById('inputName101').value;

  if (document.getElementById('male').checked) {
    document.getElementById('custom').value += ', ' + 'Type:' + ' ' +
      document.getElementById('male').value;
  }
  else if (document.getElementById('female').checked) {
    document.getElementById('custom').value += ', ' + 'Type:' + ' ' + 
      document.getElementById('female').value;
  }
}

In fact, that most probably threw an error on console, you should check those to see what's wrong with your code.

Answer 3

You can't use an if statement inside an expression. You have happened to write it in a way that actually runs, but the expressions inside the if statement are just evaluated and discarded.

You can use the conditional operator in an expression:

function FillIn() {
  document.getElementById('custom').value = 
    'Main Text:' + ' ' +  document.getElementById('inputName').value + ', ' +
    '1st Text:' + ' ' + document.getElementById('inputName101').value +
    (document.getElementById('male').checked ?
      ', ' + 'Type:' + ' ' + document.getElementById('male').value :
      (document.getElementById('female').checked ?
        ', ' + 'Type:' + ' ' + document.getElementById('female').value :
        ''
      )
    ); 
}

Using local variables for the elements makes the code a bit more readable:

function FillIn() {
  var male = document.getElementById('male');
  var female = document.getElementById('female');
  document.getElementById('custom').value = 
    'Main Text:' + ' ' +  document.getElementById('inputName').value + ', ' +
    '1st Text:' + ' ' + document.getElementById('inputName101').value +
    (male.checked ?
      ', ' + 'Type:' + ' ' + male.value :
      (female.checked ?
        ', ' + 'Type:' + ' ' + female.value :
        ''
      )
    ); 
}