So I seem to have this issue a lot with my output not showing on the html, and even following along previous programs seems to give me no clue on why they never show. But I have a simple tip calculate program in javascript, I want the tip amount and tip per person to appear under the form on the html page, but whenever I hit the submit button nothing appears. I tried different event listeners (both visible in the code) one on the button and one in the javascript but it did nothing. I’m not sure if it’s due to the “” around the submit in html and the ” around submit in javascript, or even if I’m supposed to use ” around the ids in the html, I saw different code using either or so I was uncertain on which to really use so I went with “” around the ids in the html file.
HTML (filename pro3):
<!DOCTYPE html>
<html>
<head>
<title>Project 3</title>
</head>
<body>
<script src = "pro3java.js"></script>
<h1>TIP CALUCULATOR</h1>
<form name = 'tipForm'>
<p>Enter bill amount:</p>
<input type="number"name="billAmt">
<br>
<p>Enter tip percentage:</p>
<input type="number" name="tipPerc">
<br>
<p>Enter number of people:</p>
<input type="number" name="people">
<br>
<br>
<button type="submit" onclick="result()">Calculate</button>
<br>
</form>
<div id = 'tipResult'></div>
</body>
</html>
JAVASCRIPT (filename pro3java:
const form = document.forms.tipForm;
const output = document.getElementById('#tipResult');
form.addEventListener('submit', result);
//calc
let tip = parseInt(form.bill.value) * (parseInt(form.tipPerc.value) / 100);
let amount = (parseInt(form.bill.value) + parseInt(tip)) / form.people.value;
let total = amount.toFixed(2);
function result(e){
tipResult.textContent = `Your tip is $${tip}!`;
tipResult.textContent = `Everyone will pay $${total}!`;
} //result end