I’m making a simple tip calculator and was having trouble appending the the result to an empty div that I have (class=“answer-area”).
Trying to set the result to a variable then appending it to the answer area wasn’t working, but then I found if I just set
answerArea.innerHTML = result
it worked fine.
Could anyone tell my why this is, or what the correct way to add the result to the div would be? Any general feedback on code quality is also welcome.
Thanks! Here’s the code:
<h1>Tip Calculator</h1>
<div class="calc-container">
<div class="total-bill-container">
<form action="">
<input name="bill-total" id="bill" step=".01" type="number">
</form>
<h3>Total Bill</h3>
</div>
<div class="service-container">
<select name="serviceOptions" id="service">
<option value=".25">Excellent (25%)</option>
<option value=".20">Great (20%)</option>
<option value=".15">Average (15%)</option>
<option value=".10">Poor (10%)</option>
</select>
</div>
<div class="people-paying-container">
<form action="">
<input type="number" id="people-splitting">
</form>
<h4>People Splitting Tip</h4>
</div>
<div class="answer-area">
</div>
</div>
<div class="button-div">
<button id="getTotal" onclick="calculate()">calculate</button>
</div>
calculate = () => {
let bill = document.getElementById("bill").value
let selectedValue = document.getElementById('service').value
let peopleSplitting = document.getElementById('people-splitting').value
let answerArea = document.querySelector('.answer-area')
let result = (bill * selectedValue / peopleSplitting).toFixed(2)
//answerArea.appendChild(result)
answerArea.innerHTML = result
}
The commented line is where I was trying to append.