innerHTML不显示浮动？（javascript）

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

代码的要点是获取两个输入（小时工资和一周工作小时数），然后输出一年的收入。我使用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>

var rate=document.getElementById（'hourlywage'）。值；
var parsedRate=parseFloat（汇率）；
var hours=document.getElementById（'hoursworked'）。值；
var parseHours=parseFloat（小时）；
变量结果=（解析率*解析小时数*52.0）；
函数annualSal（）{
document.getElementById（“结果”）.innerHTML=result；
}
小时工资：
每周工作时间：
点击这里
每小时收费为：

您有多处错误：

第一个是变量名拼写错误。 第二个问题是，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>

函数annualSal（）{
var rate=document.getElementById（'hourlywage'）。值；
var parsedRate=parseFloat（汇率）；
var hours=document.getElementById（'hoursworked'）。值；
var parseHours=parseFloat（小时）；
var result=（parsedRate*parseHours*52.0）；
document.getElementById（'output'）。innerHTML=result；
}

---

通过将代码的函数外部分移动到函数内，每次按下按钮时都会运行，因此每次运行时，我们都会确保诸如

hourlywage

和

hoursworked

之类的元素确实存在，它还可以在每次运行

annualSal

时重新获取值，因此，如果用户更改输入框中的值并再次单击按钮，他们将根据新值获得更新的结果。

您将parsedRate错写为parseRate。您还试图在输入值之前读取这些值，以及在元素存在之前引用页面上的元素。即使他在元素存在之后运行代码，它也会在用户有机会键入它们之前运行。@Barmar:代码现在在

annualSal

函数中，因此，当用户单击调用此函数的按钮时，它们将运行。