简单的JS计算器输出问题

Question

I have a calculator which I have put together to work out two values and then multiply by the third and simple out put the results.

I have created a demo but the issue I have is outputting the two id's 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

You are setting two variables to elements on the page...

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

... but you are only using one of them later to update values.

display.innerHTML = (costPerHour, meetingCost);

It looks like you simply need to use display2 in the same fashion.

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