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之前，您正在運行腳本的前兩行。 因此，當您嘗試使用document.getElementById("ProductName");查找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();" />

小提琴

輸入是自動關閉的，您應該停止使用document.write ，它將覆蓋整個文檔並刪除當前存在的所有內容！