javascript - 简单的JS计算器输出问题

Question

我有一个计算器，我将其放在一起计算出两个值，然后乘以第三个值，然后简单地输出结果。

我已经创建了一个演示，但我遇到的问题是输出两个 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>

Answer 1

您正在为页面上的元素设置两个变量...

var display = document.getElementById("display");
var display2 = document.getElementById("display2");

...但稍后您只使用其中之一来更新值。

display.innerHTML = (costPerHour, meetingCost);

看起来您只需要以相同的方式使用 display2 即可。

//for example
display.innerHTML = (costPerHour);
display2.innerHTML = (meetingCost);