在jQuery中添加3个数字并用另一个数字计算减去

时间:2017-03-07 22:57:46

标签: jquery

我正在为我的雇主开发一个项目我正在尝试创建一个jQuery函数,它将3个数字相加,然后减去总数以给我一个总使用量。

我刚刚使用了相同的功能updateDue()并更改了ID,因此它们与每个阅读时间不同。

我是jQuery的新手,将于9月前往大学学习所有这些。我想早点开始。

任何建议都会很棒。

在JSFiddle中编辑

https://jsfiddle.net/jameshanna95/w2y42rjd/?utm_source=website&utm_medium=embed&utm_campaign=w2y42rjd#&togetherjs=UslvN4QcQ2



function updateDue() {
  var sday = parseInt(document.getElementById("sday").value);
  var snight = parseInt(document.getElementById("snight").value);
  var sew = parseInt(document.getElementById("sew").value);
  // to make sure that they are numbers
  if (!sday) {
    sday = 0;
  }
  if (!snight) {
    snight = 0;
  }
  if (!sew) {
    sew = 0;
  }
  var ansD = document.getElementById("stotal");
  ansD.value = sday + snight + sew;
}


// Final Readings 

function updateDue() {
  var fday = parseInt(document.getElementById("fday").value);
  var fnight = parseInt(document.getElementById("fnight").value);
  var few = parseInt(document.getElementById("few").value);
  // to make sure that they are numbers
  if (!fday) {
    fday = 0;
  }
  if (!fnight) {
    snight = 0;
  }
  if (!few) {
    few = 0;
  }
  var ansD = document.getElementById("ftotal");
  ansD.value = fday + few + fnight;
}
var ansD = document.getElementById("usage");
ansD.value = stotal + ftotal;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

除了您updateDue声明两次(之后您更改过)的事实之外,其余代码没有太多问题,只有一些代码丢失.value

function startreading() {
  var sday = parseInt(document.getElementById("sday").value);
  var snight = parseInt(document.getElementById("snight").value);
  var sew = parseInt(document.getElementById("sew").value);
  
  if (!sday) {
    sday = 0;
  }
  if (!snight) {
    snight = 0;
  }
  if (!sew) {
    sew = 0;
  }

  var ansD = document.getElementById("stotal");
  ansD.value = sday + snight + sew;
}


// Final Readings 

function finalreading() {
  var fday = parseInt(document.getElementById("fday").value);
  var fnight = parseInt(document.getElementById("fnight").value);
  var few = parseInt(document.getElementById("few").value);
  
  if (!fday) {
    fday = 0;
  }
  if (!fnight) {
    fnight = 0;
  }
  if (!few) {
    few = 0;
  }  

  var ansD = document.getElementById("ftotal");
  ansD.value = fday + few + fnight;
  var ansD = document.getElementById("usage");
  start = !parseInt(stotal.value) ? 0 : parseInt(stotal.value);
  final = !parseInt(ftotal.value) ? 0 : parseInt(ftotal.value);
  ansD.value = start + final;

}
<h1>
Start Readings 
</h1>
<div class="form-group col-lg-6">
  <label for="exampleInputText">Day</label>
  <input type="text" name="day" class="form-control" id="sday" onchange="startreading()">
</div>

<div class="form-group col-lg-6">
  <label for="exampleInputText">Night</label>
  <input type="text" name="Night" class="form-control" id="snight" onchange="startreading()">
</div>
<div class="form-group col-lg-6">
  <label for="exampleInputText">EW</label>
  <input type="text" name="ew" class="form-control" id="sew" onchange="startreading()">
</div>
<div class="form-group col-lg-6">
  <label for="exampleInputText">Total</label>
  <input type="text" name="remainingval" class="form-control" id="stotal">
</div>
<hr>
<!-- Final Readings -->

<h1>
Final Readings 
</h1>
<div class="form-group col-lg-6">
  <label for="exampleInputText">Day</label>
  <input type="text" name="day" class="form-control" id="fday" onchange="finalreading()">
</div>

<div class="form-group col-lg-6">
  <label for="exampleInputText">Night</label>
  <input type="text" name="Night" class="form-control" id="fnight" onchange="finalreading()">
</div>
<div class="form-group col-lg-6">
  <label for="exampleInputText">EW</label>
  <input type="text" name="ew" class="form-control" id="few" onchange="finalreading()">
</div>
<div class="form-group col-lg-6">
  <label for="exampleInputText">Total</label>
  <input type="text" name="remainingval" class="form-control" id="ftotal">
</div>

<hr>

<div class="form-group col-lg-6">
  <label for="exampleInputText">usage</label>
  <input type="text" name="remainingval" class="form-control" id="usage">
</div>