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)并查看调试控制台。

Answer 2

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

<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();" />

FIDDLE

输入是自动关闭的，您应该停止使用document.write，它会覆盖整个文档并删除当前存在的所有内容！

javascript变量undefined或null

2 个答案: