在javascript中使用if和else if语句？

Question

我试图找到一个远离（正确和简单的方法）在javascript中使用IF和其他IF语句。

这是我想要做的......

此刻，我正在加入2个输入字段值并将其显示在另一个输入字母中，如下所示：

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

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

    ; 
}

所以基本上上面的代码会将inputName和inputName101的值放入custom输入字段中。 这很好用。

现在，我有2个单选按钮，我想将它们的值显示在自定义输入字段中，具体取决于选择/ checked那个。

为此，我使用以下代码：

    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

}

        ; 
    }

但是，我不确定我是否正确这样做，因为我根本没有在custom输入字段中获得单选按钮的值。

有人可以就此提出建议吗？

编辑：

单选按钮的HTML：

<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

实际上，你做错了，你不能直接连接if / else条件和字符串，更简洁的方式编写你的代码将是

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

这不会起作用......你不能只是将if语句中的字符串连接起来，就好像它是一个字符串一样。 你需要像这样做......

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;
  }
}

事实上，最有可能在控制台上出现错误，你应该检查一下，看看你的代码有什么问题。

Answer 3

您不能在表达式中使用if语句。 您碰巧以实际运行的方式编写它，但if语句中的表达式只是被评估和丢弃。

您可以在表达式中使用条件运算符：

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 :
        ''
      )
    ); 
}

使用元素的局部变量使代码更具可读性：

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 :
        ''
      )
    ); 
}