My tipping calculator works with the cost but it doesn’t add in the tip. The tip shows 0 and the total cost just shows the original cost with no tip added.
Any help would be much appreciated.
HTML:
<link rel="stylesheet" type="text/css" href="C:\\Users\\Brittany\\Documents\\randomProjectsCoding\\tippingWebsite.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>
<form>
<h1>Tipping Calculator</h1>
<h2>What is the cost?</h2>
<input id="itemCost" type="text"></input>
<h2>What is your desired tip %?</h2>
<input type="radio" value="10" name="percent">10%</input><br>
<input type="radio" value="15" name="percent">15%</input><br>
<input type="radio" value="20" name="percent">20%</input><br>
<br>
<button id="submit" type="button" value="enter"><i class="fas fa-heart"></i> Submit <i class="fas fa-heart"></i></button>
<h2>Amount to tip is:</h2>
<h1 id="tip"></h1>
<h2>Total cost is:</h2>
<h1 id="total"></h1>
</form>
<script type="text/javascript" src="C:\\Users\\Brittany\\Documents\\randomProjectsCoding\\tippingWebsite.js"></script>
</body>
Javascript:
document.getElementById("submit").addEventListener("click", calculate);
function calculate(){
let itemCost = document.getElementById("itemCost");
let radio = document.getElementsByClassName('percent');
var tipAmount = 0;
for (var i = 0, length = radio.length; i < length; i++)
{
if (radio[i].checked)
{
tipAmount = parseFloat(radio[i].value);
return tipAmount;
break;
}
}
let tip = parseFloat(itemCost.value) * (parseFloat(tipAmount)/100);
document.getElementById('tip').innerHTML = tip;
let total = parseFloat(tip) + parseFloat(itemCost.value);
document.getElementById("total").innerHTML = total;
}
I could figure out what the problem is, but i don’t want to spoonfeed you the answer, that would waste a valuable learning opportunity.
If you can’t figure it out, of course feel free to make another reply, show us what you have tried, this way, we have to do less, from which you will learn more (that might sound as a contradiction, but its true)