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

时间:2014-03-24 13:31:29

标签: javascript

我正在尝试找到一个离开(正确和简单的方法)在javascript中使用IF和其他IF语句。

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

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

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

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

    ; 
}

所以基本上上面的代码会将inputNameinputName101的值放入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);">

3 个答案:

答案 0 :(得分:2)

实际上,你做错了,你不能直接连接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;
}

答案 1 :(得分:0)

它不会起作用......你不能将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;
  }
}

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

答案 2 :(得分:0)

您无法在表达式中使用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 :
        ''
      )
    ); 
}