函数外的数组被分配了空间，但是在javascript中没有分配函数外的变量，为什么？

Question

这是我的 javascript 代码：

var strp = [0,19,26,33,40,46,49,57,61,65,67,73,76];
var i = document.getElementById("length").value;
function calculator(){

    document.write("the total cost is " + strp[document.getElementById("length").value]);

     document.write("total is ");
     document.write(strp[i]);   
}

我正在尝试在这里编写一个计算函数。和 html 部分是这样的：

<form>         
    select size   : <select id="length">
                    <option value="0">Please Choose One...</option>
                    <option value="1">10 inches</option>
                    <option value="2">12 inches</option>
      </select>
    <input type="button" value="Calculate" onclick="calculator()" />
</form>

当我在浏览器中执行此代码时，我通过“getelementbyid 值”访问数组并且我得到了正确的答案。但是当我将 getelmentbyid 值存储在一个变量中，并使用该变量访问数组时，输出未定义为什么会这样？

Answer 1

这是 document.write() 清除页面上所有以前的内容。请改用一些适当的 DOM 操作方法，例如 innerHTML 或 appendChild()。

Answer 2

我的猜测是 i 未定义，因为 javascript 在 html 之前呈现。因此，当 i 创建时，还没有 id 长度的元素。尝试将 javascript 放在 html 下面来解决这个问题。