在 html 正文中显示 javascript 变量

Question

我正在寻找一种在 html 计算器的主体中调用 javascript 变量“o”的方法。我不明白为什么这不起作用。请帮忙，谢谢！

function calc() {
    var i = document.getElementById("input").value;
    var p = document.getElementById("percent").value;
    var o = (i / 100) * p;

}

function GetTotal() {
    document.getElementById('answer').style.display = "block";
}

<form action="javascript:calc()">
    Input: <input type="text" id="input" /><br />
    Percent: <input type="text" id="percent" value="10" />%<br />

    <input type="button" style="color:#000;" name="Get Total" value="Get Total" onclick="GetTotal()" />

    <div id="answer" style="display:none;"> Total:
        <script type="text/javascript">
            document.write(o) </script>
    </div>

</form>

Answer 1

埃斯梅，

您的 document.write(o) 代码段在页面加载后立即执行。那个时候 'o' 变量没有定义。单击按钮后，您使 div 可见但不更新结果。以下是针对您的问题的可能建议：

<html>
<head>
<title>HTML Calculator</title>

<script type="text/javascript">
function calc() {
  var i = document.getElementById("input").value;
  var p = document.getElementById("percent").value;
  return (i/100) * p;
}

function GetTotal() {
   document.getElementById('answer').style.display = "block";
   document.getElementById('answer_value').innerText = calc();
}
</script>
</head>

<body>
<form>
Input: <input type="text" id="input"/><br />
Percent: <input type="text" id="percent" value="10"/>%<br />

<input type="button" style="color:#000;" name="Get Total" value="Get Total" onclick="GetTotal()" />

<div id="answer" style="display:none;"> Total: <span id="answer_value"></span> </div>
      
</form>


</body>
</html>

在 html 正文中显示 javascript 变量

Displaying a javascript var in html body

html

javascript

variables

calculator

calculated-field