从选择框中获取值后计算

时间:2018-10-17 06:27:04

标签: javascript html

我想通过乘以天数和价格来计算总价格。如果他们在选定的框中选择是,则另外添加10个早餐。但是当我选择早餐时选择“是”。它不计算早餐。我已经使用JavaScript进行了计算,但是看来我做错了。

有人知道我该如何解决吗?非常感谢您的帮助。

HTML:

<input type="text" name="price" id="1" value="10">

<label  for="numofdays">Num.of Days</label>
<input class="form-control" type="text" name="numofdays" id="id1"  value='9'>


<label  for="totalcharges">Total charges</label>
<input class="form-control" type="text" name="totalcharges"  id="id2"  value=myFunction()>

<label  for="bfast">Breakfast</label>
<select name="bfast"   class="formcontrol" > 
  <option >Select option..</option>
  <option id='yes' value='10'>Yes</option>
  <option >No</option>
</select>

JavaScript:

var p1 = document.getElementById("1").value;
var p2 = document.getElementById("id1").value;
var p3 = document.getElementById("yes").value;

function myFunction() {
    if(document.getElementById('yes').selected){
       return (p1*p2)+p3;
    }
    else{
        return (p1*p2);
    }
}

document.getElementById("id2").value=myFunction();

1 个答案:

答案 0 :(得分:0)

您必须获取select元素的值,而不是选项的值。

类似这样的东西:

<select id="bfast" name="bfast"   class="formcontrol" > 
    <option value="">Select option..</option>
    <option value='10'>Yes</option>
    <option value='0'>No</option>
</select>

....

function myFunction() {
    var bfastValue = document.getElementById('bfast').value;
    if(bfastValue){
      return (p1*p2)+Number(bfastValue);
    }
    else{
      return (p1*p2);
    }
}

我为您创建了这个fiddler