Ошибка - невозможно прочитать свойство 'значение' с нулевым значением

Question

Я видел несколько статей об этой проблеме, которых у меня не было до сих пор.

У меня есть поле ввода с идентификатором "fname", и я хочу получить элемент по id и сохранить его значениев переменной.

Тем не менее, я получаю ошибку, упомянутую в заголовке.

JavaScript

<script>
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
</script>

HTML

<p>Enter the first string:<input type = "name" id="fname">
<p>Enter the second:<input type = "name" id="lname"></p>

Кто-нибудь может извлечь ошибку?Я пытался последние 20 минут.

Answer 1

Вам необходимо выполнить код Javascript после полной визуализации документа.Javascript имеет встроенную функцию для этого, нет необходимости запускать его при нажатии кнопки.

<p>Enter the first string:<input type = "name" id="fname">
<p>Enter the second:<input type = "name" id="lname"></p>

<script>
//first define the variables so they are available in the global scope
var fname, lname;

//once the document has fully loaded, call the function 
//passed as second argument to the addEventListener method
document.addEventListener('DOMContentLoaded', function(){ 
   fname = document.getElementById("fname").value;
   lname = document.getElementById("lname").value;
});
</script>

Обратите внимание, что он не будет работать в более старых версиях Internet Explorer, так как они не поддерживают событие DOMContentLoaded.

Answer 2

Мы всегда должны загружать скрипты после элемента DOM.В этом случае вы должны переместить скрипт вниз, чтобы он заработал.Всегда предпочтительнее загружать скрипт непосредственно перед конечным тегом тела </body/>

<p>Enter the first string:<input type = "name" id="fname">
<p>Enter the second:<input type = "name" id="lname"></p>

<script>
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
</script>

Пример работы в реальном времени - https://jsitor.com/Rg0jU9HFN