所以我似乎有很多這個問題，我的輸出沒有顯示在 html 上，即使按照以前的程式進行操作似乎也沒有讓我知道為什么它們從不顯示。但是我在 javascript 中有一個簡單的小費計算程式，我希望每個人的小費金額和小費出現在 html 頁面的表單下，但是每當我點擊提交按鈕時，什么都沒有出現。我嘗試了不同的事件偵聽器（都在代碼中可見），一個在按鈕上，一個在 javascript 中，但它什么也沒做。我不確定這是否是由于 html 中提交周圍的 "" 和 javascript 中提交周圍的 ''，或者即使我應該在 html 中的 id 周圍使用 ''，我看到了不同的代碼使用或者，我不確定要真正使用哪個，所以我在 html 檔案中的 id 周圍使用了“”。
HTML（檔案名 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（檔案名 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
uj5u.com熱心網友回復：
這里有些不對勁。您有錯誤的賬單變數 (billAmt)，并且您有一個事件偵聽器和一個行內事件 (onsubmit="result()")。最后，您需要將計算移到 result() 函式中。否則，這些計算僅在頁面加載時（當它們都為空時）發生。我修復了這 3 個錯誤并且它有效。另外，我在表單提交偵聽器中添加了一個“e.preventDefault()”（e 是事件的縮寫）。這將阻止表單執行它的默認行為，即重繪 頁面
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/369751.html
標籤：javascript html