一键生成所有结果- Javascript

Question

首先，让我说一句不擅长Javascript。

我正在开发一个简单的ROI计算器，当有人输入他的网络支持公司的设备数量时，它将显示用户他的当前成本和我们为其提供服务的成本。问题是，当我按下generate cost时，所有的信息都不会一次性生成。我必须再点击两次"Generate cost“按钮才能得到所有的结果。

我必须再点击两次"Generate cost“按钮才能得到我们的成本和节省的结果。

我只想知道如何确保当我单击按钮时，所有的文本框都会被填充，而不是我再单击两次来生成其余的结果。

我在这里生成了这个文件：http://codepen.io/anon/pen/PwpePX

HTML

<h1 style="font-size:40px;text-align:center;">ROI Calculator</h1>

<br/>
<div style="float:left;">
     <h1>Your Cost</h1>
Total no. of managed servers
    <input type="roi_text" id="value1" name="value1" value="" />
    <br/>Total no. of network devices
    <input type="roi_text" id="value2" name="value2" value="" />
    <br/>Total no. of workstations
    <input type="roi_text" id="value3" name="value3" value="" />
    <br/>No of service desk users
    <input type="roi_text" id="value4" name="value4" value="" />
    <br/>How many engineers do you have?
    <input type="roi_text" id="value5" name="value5" value="" />
    <br/>Average salary of your engineers*
    <input type="roi_text" id="value6" name="value6" value="" />
    <br/>Average on-call allowance per month?
    <input type="roi_text" id="value7" name="value7" value="" />
    <br/>
    <br/>Your Current Cost
    <input type="roi_text" id="answer" name="answer" value="" disabled="disabled" />
</div>
<div style="float:left;">
     <h1>Our Cost</h1>
NOC =
    <input type="roi_text" id="answer1" name="answer1" value="" disabled="disabled" />
    <br/>Out of Hour NOC =
    <input type="roi_text" id="answer2" name="answer2" value="" disabled="disabled" />
    <br/>24/7 Service desk =
    <input type="roi_text" id="answer3" name="answer3" value="" disabled="disabled" />
    <br/>Out of Hours SD =
    <input type="roi_text" id="answer4" name="answer4" value="" disabled="disabled" />
    <br/>Our cost =
    <input type="roi_text" id="answer5" name="answer5" value="" />
    <br/>
    <br/>
    <br/>Total Savings =
    <input type="roi_text" id="answer7" name="answer7" value="" />
    <input type="button" name="Sumbit" value="GENERATE COST" onclick="javascript:addNumbers();" /> 

JAVASCRIPT

     function addNumbers() {
 var val1 = parseInt(document.getElementById("value1").value);
 var val2 = parseInt(document.getElementById("value2").value);
 var val3 = parseInt(document.getElementById("value3").value);
 var val4 = parseInt(document.getElementById("value4").value);
 var val5 = parseInt(document.getElementById("value5").value);
 var val6 = parseInt(document.getElementById("value6").value);
 var val7 = parseInt(document.getElementById("value7").value);
 var noc1 = parseInt(document.getElementById("answer1").value);
 var oohnoc1 = parseInt(document.getElementById("answer2").value);
 var sd1 = parseInt(document.getElementById("answer3").value);
 var oohsd1 = parseInt(document.getElementById("answer4").value);
 var ansD1 = parseInt(document.getElementById("answer").value);
 var inbaycost1 = parseInt(document.getElementById("answer5").value);


 var ansD = document.getElementById("answer");
 ansD.value = (val5 * val6 + val7 * 12);

 var noc = document.getElementById("answer1");
 noc.value = ((val1 * 25 + val2 * 10 + val3 * 5) * 12);

 var oohnoc = document.getElementById("answer2");
 oohnoc.value = ((val1 * 15 + val2 * 5 + val3 * 3.5) * 12);

 var sd = document.getElementById("answer3");
 sd.value = ((val4 * 15) * 12);

 var oohsd = document.getElementById("answer4");
 oohsd.value = ((val4 * 10) * 12);

 var inbaycost = document.getElementById("answer5");
 inbaycost.value = (noc1 + oohnoc1 + sd1 + oohsd1);

 var totalsaving = document.getElementById("answer7");
 totalsaving.value = (ansD1 - inbaycost1); }        

将会对解决这个问题提供任何帮助。

非常感谢

Answer 1

你弄错了顺序。示例:取"answer4“的TE值

var oohsd1 = parseInt(document.getElementById("answer4").value);

然后计算它的值

var oohsd = document.getElementById("answer4");
oohsd.value = ((val4 * 10) * 12);

这就是它的工作原理

function addNumbers() {
 var val1 = parseInt(document.getElementById("value1").value);
 var val2 = parseInt(document.getElementById("value2").value);
 var val3 = parseInt(document.getElementById("value3").value);
 var val4 = parseInt(document.getElementById("value4").value);
 var val5 = parseInt(document.getElementById("value5").value);
 var val6 = parseInt(document.getElementById("value6").value);
 var val7 = parseInt(document.getElementById("value7").value);

 var noc = document.getElementById("answer1");
 noc.value = ((val1 * 25 + val2 * 10 + val3 * 5) * 12);
 var noc1 = parseInt(document.getElementById("answer1").value);

 var oohnoc = document.getElementById("answer2");
 oohnoc.value = ((val1 * 15 + val2 * 5 + val3 * 3.5) * 12);
 var oohnoc1 = parseInt(document.getElementById("answer2").value) ;

 var sd = document.getElementById("answer3");
 sd.value = ((val4 * 15) * 12);

 var oohsd = document.getElementById("answer4");
 oohsd.value = ((val4 * 10) * 12);

 var oohsd1 = parseInt(document.getElementById("answer4").value);

 var sd1 = parseInt(document.getElementById("answer3").value);

 var inbaycost = document.getElementById("answer5");
 inbaycost.value = (noc1 + oohnoc1 + sd1 + oohsd1);


 var ansD = document.getElementById("answer");
 ansD.value = (val5 * val6 + val7 * 12);
 var ansD1 = parseInt(document.getElementById("answer").value);

 var inbaycost1 = parseInt(document.getElementById("answer5").value);

 var totalsaving = document.getElementById("answer7");
 totalsaving.value = (ansD1 - inbaycost1);
}

链接：http://codepen.io/anon/pen/xbqjXpv