innerHTML不显示浮点数？ （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

你有多个错误：

首先是拼写错误的变量名称。 第二个问题是，在制作HTML元素之前，您的JavaScript部分正在运行，因此当您引用这些元素时，这些元素还不存在。

这是一个固定的：

<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时重新获取值，因此，如果用户更改输入框中的值并再次单击按钮，则会根据新值获得更新结果。