Простой выпускной вывод калькулятора JS

Question

У меня есть калькулятор, который я собрал, чтобы выработать два значения, а затем умножить на третий и простой результат.

Я создал демо, но проблема у меня выводит два идентификаторами 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);