简单的JS计算器输出问题
Simple JS calculator output issue
我有一个计算器,我把它放在一起计算出两个值,然后乘以第三个值,简单地输出结果。
我已经创建了一个演示,但问题是输出两个id的display
&display2
Fiddle
function calculateCost() {
var weeks = 52;
var weeklyHours = 40;
var display = document.getElementById("display");
var display2 = document.getElementById("display2");
// saves the value enterd in the annual salary field to a variable.
var annualSalary = (document.getElementById("avgsalary")).value;
// saves the value entered in the participants field to a variable
var participants = (document.getElementById("numberrr")).value;
//Divide the annual Salary by 52 to get the weekly salary figure.
var weeklyWage = parseInt(annualSalary) / weeks;
// Works out the CPH and saves the answer to a variable.
var costPerHour = weeklyWage / 40;
// rounds the number up to nearest 2 decimal value.
costPerHour = Math.round(costPerHour * 100) / 100;
/*console.log(costPerHour); */
// saves the value entered into the hours field to a variable.
var hours = (document.getElementById("hoursss")).value;
// multiplies the CPH by the number of hours to give a figure for total cost per person.
var costPerPerson = costPerHour * hours;
// Multiplies the cost per person with the number of participants to give a figure for the total cost of the meeting.
var meetingCost = (costPerPerson * parseInt(participants));
display.innerHTML = (costPerHour, meetingCost);
}
<form>
<div class="money-ux">1. Average annual salary of participants
<input class="avgsal" type="text" name="avgsalary" required id="avgsalary">
</div>
<div class="people-ux">2. Number of participants
<input class="numpar" type="text" name="numberrr" required id="numberrr">
</div>
<div class="watch-ux">3. Duration of travel (hours)
<input class="hour" type="text" name="hours" required id="hoursss">
</div>
<div>
<input class="calc-btn" id="calculate" type="button" value="calculate" onclick="calculateCost();" />
</div>
<div>
<input class="reset-btn" id="reset" type="reset" value="Reset">
</div>
</form>
<div id="display" style="height: 50px; border: thin solid red;"></div>
<div id="display2" style="height: 50px; border: thin solid green;"></div>
您正在为页面上的元素设置两个变量。。。
var display = document.getElementById("display");
var display2 = document.getElementById("display2");
但是您以后只使用其中一个来更新值。
display.innerHTML = (costPerHour, meetingCost);
看起来您只需要以相同的方式使用display2
。
//for example
display.innerHTML = (costPerHour);
display2.innerHTML = (meetingCost);
相关文章:
- 空函数似乎从包装器中清除了一些类,但不是全部.试图找出问题所在
- 电话间隙没有互联网警报弹出问题
- 从不同选项卡打开时出现Javascript弹出问题
- 什么'这个Javascript函数的输出有问题
- IE 中的 Javascript window.close() 弹出问题
- 完整日历弹出问题
- 模态弹出问题
- 关于确定数组中存储的最大值的不同方法的一些问题(加上输出消息问题)
- 在angular js中向控制器注入常量(模式弹出问题)
- Facebook登录弹出问题
- Knockout-弹出问题编辑项目
- 解决浏览器弹出问题
- 在Javascript中输入和输出有问题
- chrome新版本37中的弹出问题
- phanttomjs:绝对路径工作,但相对路径给出问题
- 显示正确输出的问题.JS单选按钮的选择和添加
- Jquery输出值问题
- Javascript滑出问题
- 需要帮助解决模态弹出问题
- iPad Safari弹出问题