javascript变量未定义或为空

在别处找不到具体的答案。我对JS完全陌生，试图从表单中提取一个值并将其写入页面。尝试写入ProductName时的结果未定义，尝试写入ProductNameElement时的结果为空。我确定这与页面加载时表单值为空有关，但不确定加载后表单值是否为空

<script>

    var ProductNameElement = document.getElementById("ProductName");
    var ProductName = ProductNameElement.value;

    function showname(){

    document.write(ProductName);

    }

</script>

<h2>Revenues</h2>

<div class="number">Product Name: <input type="text" id="ProductName" value=""></input></div>

<input type="button" value"showname" onclick="showname();"></input>

var ProductNameElement=document.getElementById（“ProductName”）；
var ProductName=ProductNameElement.value；
函数showname（）{
document.write（ProductName）；
}
收入
产品名称：

在解析页面中的元素并将其放入DOM之前，您过早地运行了脚本的前两行。因此，当您试图使用

document.getElementById（“ProductName”）查找
ProductName
元素时，它还不存在

将脚本放在
标记之前，然后在运行脚本时，所有页面元素都将可用。或者，只需将所有代码放入在单击事件之前不会调用的
showname
函数中即可

function showname(){

    var ProductNameElement = document.getElementById("ProductName");
    var ProductName = ProductNameElement.value;

    document.write(ProductName);
}

而且，正如其他人所说，在加载文档后使用
document.write（）
将导致清除现有文档并创建新的空文档。这绝不是你想要的。如果您只是为了调试而这样做，请使用console.log（ProductName）

并查看调试控制台。

您必须在函数中获取元素和值，否则它们不可用，并且不会捕获值的更改

<script>
    function showname(){
        var ProductNameElement = document.getElementById("ProductName");
        var ProductName = ProductNameElement.value;

        document.write(ProductName);
    }
</script>

<h2>Revenues</h2>

<div class="number">
    Product Name: <input type="text" id="ProductName" value="" />
</div>

<input type="button" value"showname" onclick="showname();" />

函数showname（）{
var ProductNameElement=document.getElementById（“ProductName”）；
var ProductName=ProductNameElement.value；
document.write（ProductName）；
}
收入
产品名称：

---

输入是自动关闭的，您应该停止使用

文档。写入
，它将覆盖整个文档并删除当前存在的所有内容
 不，这是因为HTML解析器在到达脚本时还没有机会知道这两个元素，因为您的脚本在它引用的标记定义之前就已经定位和运行了。最好将该代码作为函数放在页面的
onload
事件处理程序中。@ParamagneticCroissant-没错，误读了代码-我删除了我的评论。