javascript 变量未定义或 null

Question

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

<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>

Answer 1

在页面中的元素被解析并放入 DOM 之前，您运行脚本的前两行太早了。因此，ProductName当您尝试使用 document.getElementById("ProductName"); 查找该元素时，该元素尚不存在.

将脚本放在 </body> 之前标签，然后当您运行脚本时，所有页面元素都将可用。或者，只需将所有代码放入 showname 中在单击事件发生之前不会调用的函数。

function showname(){

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

    document.write(ProductName);
}

并且，正如其他人所说，使用 document.write()加载文档后将导致现有文档被清除并创建一个新的空文档。这几乎不是你想要的。如果您只是为了调试而执行此操作，请使用 console.log(ProductName)并查看调试控制台。