提示计算器功能的 InnerHTML 问题

Question

我正在尝试为计算机科学编写一个简单的小费计算器 class 我在。它在 HTML/JavaScript。实际的 Tip Calculating 函数写在 JavaScript 中。我被告知使用 innerHTML 来显示 HTML 中函数的输出。因此，根据我的理解，innerHTML 通过将任何 value/variable（在本例中是我的函数的输出）写入具有定义的任何 id 的 HTML 容器来工作。

起初我以为可能只是我的代码顺序错误。但是我试过移动函数定义，但没有任何帮助。从 HTML 中提取变量时，我已经验证了输入 ID 是正确的。我已经阅读了很多关于类似问题的资料，但我似乎找不到我做错了什么。

所以这里是我定义函数的地方，并使用 innerHTML 来编写输出。该函数在实际用户输入之前定义。

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>

因此，我希望当您输入支票金额和小费百分比并单击 "Calculate Tip" 按钮时，它将运行函数和内部 HTML 写入输出将函数添加到 div 容器中的页面。但是，当我单击按钮时，似乎什么也没有发生。如果有人有 help/guidance 我将不胜感激。

Answer 1

您需要将 "tipVar" 放在函数内的引号中。否则，将传入一个名为 tipVar 的未定义变量的值，并且找不到该 ID 的元素。

Answer 2

您的代码有错别字：

使用document.getElementById("tipVar").innerHTML = tipTotal;

您的代码无法正常工作，因为 tipVar 未定义，它是一个 ID，应作为字符串使用。

我已经更新了问题片段，现在应该可以使用了。

Answer 3

您刚刚忘记了 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>

提示计算器功能的 InnerHTML 问题

InnerHTML problems with Tip Calculator function

html

javascript

innerhtml