Почему я не могу определить элемент DOM как глобальную переменную?

Question

Почему я не могу определить элемент DOM как глобальную переменную?

1

Я работаю над формой и хотел использовать Javascript для вывода ввода формы.

Поэтому у меня есть следующий скрипт:

<script>
function showName() {
  var box = document.getElementById("lorem").value;

  console.log(box); 
}

showName(); 
</script> '

Код выше работает очень хорошо, но мне нужно значение var box = document.getElementById("lorem").value; чтобы быть глобальной переменной, чтобы я мог использовать ее в других функциях без повторного объявления.

Поэтому, когда у меня это есть, ничего не выводится:

<script>
//Declared outside the function
var box = document.getElementById("lorem").value;

function showName() {
  console.log(box); 
}

showName(); 
</script>

Пожалуйста, что я делаю неправильно?

Adetona Abiodun Abdulquadri 09 июнь 2017, в 07:37

Источник

Теги:

javascript

dom

3 ответа

Ещё вопросы

raychz · Answer 1 · 2017-06-09T04-10-00.000Z

Вы можете полностью положить скрипт в конец, прежде чем закрыть <body>, или сделать так, как предлагалось @jafarbtech, и добавить прослушиватель событий, чтобы дождаться загрузки содержимого DOM.

Как добавить прослушиватель событий?
Нет проблем. Посетите developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded, чтобы получить дополнительную информацию о том, как ждать загрузки DOM.
Проблема в том, что я хотел сделать триггер функции "onclick"

mfeineis · Answer 2 · 2017-06-09T03-54-00.000Z

Значение box - это начальное значение вашего элемента lorem при его объявлении. Вероятно, вы хотите:

var box = document.getElementById('lorem');

function showName() {
    console.log(box.value); // <-- get the current value
}

// Outputs the current value, initially it will be empty
// of course, until you change your input and call the 
// function again
showName();

Edit: DOM необходимо загрузить для этого, чтобы убедиться, что вы поместите свои теги скриптов в свой <body>

jafarbtech · Answer 3 · 2017-06-09T02-39-00.000Z

Вы можете использовать то же самое. это не проблема. если вы все еще получаете нулевую ошибку, я бы предложил добавить скрипт в конце документа или заключить его в document.addEventListener("DOMContentLoaded", function(event) { block, как document.addEventListener("DOMContentLoaded", function(event) { ниже

document.addEventListener("DOMContentLoaded", function(event) {
var box = document.getElementById("lorem").value;
function showName() {


console.log(box); 

     }
showName(); 
});

<input type="text" value="hai" id="lorem"/>