javascript tip calculator output not showing on html page-CodePudding

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

CodePudding user response：

There were a few things amiss here. You had the wrong variable for the bill (billAmt), and you had an event listener doubled up with an inline event (onsubmit="result()"). Finally, you needed to move your calculations to be inside the result() function. Otherwise, those calculations only happen when the page loads (when they're all empty). I fixed those 3 errors and it works. Also, I added in a 'e.preventDefault()' (e is short for event) into the form submit listener. That will prevent the form from doing it's default behaviour, which is to refresh the page

const form = document.forms.tipForm;
const output = document.getElementById('#tipResult');
form.addEventListener('submit', result);

function result(e) {
  e.preventDefault(); // stop form from refreshing the page
  //calc
  let tip = parseInt(form.billAmt.value) * (parseInt(form.tipPerc.value) / 100);
  let amount = (parseInt(form.billAmt.value)   parseInt(tip)) / form.people.value;
  let total = amount.toFixed(2);
  tipResult.textContent = `Your tip is $${tip}!`;
  tipResult.textContent = `Everyone will pay $${total}!`;
  return false

} //result end

<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>
  <button type="submit">Calculate</button>
  <br>
</form>
<div id='tipResult'></div>