javascript - innerHTML 不显示 float ？ (javascript)

Question

我搜索了这个网站，想找一个和我有类似问题的人，但我似乎找不到。我真的为此绞尽脑汁。

代码的要点是接受两个输入(小时费率和一周工作小时数)并输出一年的收入。我使用 innerHTML 从表单中获取这些变量，然后将两者添加到一个变量中，然后再次尝试使用 innerHTML 将其放入一个段落中。它一直给我“未定义”。有人知道我做错了什么吗？

<script type="text/javascript">

var rate = document.getElementById('hourlywage').value;
var parsedRate = parseFloat(rate);
var hours = document.getElementById('hoursworked').value;
var parseHours = parseFloat(hours);
var result = (parseRate * parseHours * 52.0);

function annualSal(){
document.getElementById("outcome").innerHTML = result ;
}

</script>

<h6>Hourly Wage:</h6>
<input type="text" id="hourlywage" />
<h6>Hours Per Week:</h6>
<input type="text" id="hoursworked" />
<h6><h6>
<button onclick="annualSal()">Click Here</button>
<p>The Hourly Rate is:</p>
<p id="outcome"></p>

Answer 1

你有多个错误:

第一个是拼错变量名。 第二个是你的 JavaScript 的一部分在你的 HTML 元素被创建之前运行，所以当你引用它们时这些元素还不存在。

这是一个固定的:

<script type="text/javascript">
    function annualSal(){
        var rate = document.getElementById('hourlywage').value;
        var parsedRate = parseFloat(rate);
        var hours = document.getElementById('hoursworked').value;
        var parseHours = parseFloat(hours);
        var result = (parsedRate * parseHours * 52.0);
        document.getElementById('outcome').innerHTML = result;
    }
</script>

通过将代码的函数外部部分移到函数内部，它会在您每次按下按钮时运行，因此在每次运行时我们都可以确保 hourlywage 和 等元素hoursworked 确实存在，它还会在您每次运行 annualSal 时重新获取值，因此如果用户更改输入框中的值并再次单击按钮，他们将获得更新的结果基于新的值(value)观。