提示計算器 function 的 InnerHTML 問題
[英]InnerHTML problems with Tip Calculator function
問題描述
我正在嘗試為我參與的計算機科學 class 編寫一個簡單的提示計算器。它使用 HTML/JavaScript。 計算 function 的實際提示寫在 JavaScript 中。 我被告知要使用 innerHTML 在 HTML 中顯示 function 的 output。 因此，據我了解，innerHTML 通過將任何值/變量（在本例中為我的函數的 output）寫入具有定義的任何 id 的 HTML 容器來工作。
起初我以為可能只是我的代碼順序錯誤。 但是我嘗試過移動 function 定義，但這沒有任何幫助。 從 HTML 中提取變量時，我已驗證輸入 ID 是正確的。 我已經閱讀了很多關於類似問題的書，但我似乎找不到我做錯了什么。
所以這里我定義了我的 function，並使用 innerHTML 來編寫 output。 function 在實際用戶輸入之前定義。
function calculateTip(){ var checkAmount = document.getElementById("amountBox").value; var percentTip = document.getElementById("tipBox").value; var tipTotal = checkAmount * (percentTip / 100); document.getElementById("tipVar").innerHTML = tipTotal; }
<body> <P> Enter the check amount: $<input type="numeric" id="amountBox" size=10 value=""> <br> Tip percentage: %<input type="numeric" id="tipBox" size=4 value=""> </P> <input type="button" value="Calculate Tip" onclick="calculateTip();" > <hr> <div id="tipVar"></div> </body>
所以，我期待當您輸入支票金額和小費百分比並單擊“計算小費”按鈕時，它將運行 function 並且 innerHTML 會將 ZC1C425268E68385D1AB5074 中的 ZC1C425268E68385D1AB5074F 頁面中的 ZC1C425268E68385D1AB5074 的 output 寫入但是，當我單擊按鈕時似乎沒有任何反應。 如果有人有任何幫助/指導，我將不勝感激。
3 個解決方案
解決方案1
1 2019-10-30 17:46:31
您在代碼中有錯字：
使用document.getElementById("tipVar").innerHTML = tipTotal;
您的代碼無法正常工作，因為tipVar未定義，它是一個 ID，應該用作字符串。
我已經更新了問題片段，它現在應該可以工作了。
解決方案2
0 已采納 2019-10-30 17:46:05
您需要在 function 中的引號中加上“tipVar”。 否則，將傳入一個名為tipVar 的未定義變量的值，並且它找不到該id 的元素。
解決方案3
0 2019-10-30 17:49:38
您只是忘記了 getElementById("tipBox"); 上的引號。
<html> <body> <p> Enter the check amount: <input type="numeric" id="amountBox" size=10 value=""> <br> Tip percentage: <input type="numeric" id="tipBox" size=4 value=""> </P> <input type="button" value="Calculate Tip" onclick="calculateTip();"> <hr> <div id="tipVar"></div> <script> function calculateTip(){ var checkAmount = document.getElementById("amountBox").value; var percentTip = document.getElementById("tipBox").value; var tipTotal = checkAmount * (percentTip / 100); document.getElementById("tipVar").innerHTML = tipTotal; } </script> </body> </html>
如何將這個 function 添加到我的小費計算器中？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.