Javascript: почему переменная будет работать локально, а не глобально

Question

Javascript: почему переменная будет работать локально, а не глобально

1

Я новичок в JavaScript, и мне трудно понять, почему переменная может использоваться, когда она объявлена внутри функции (локально), но не снаружи (глобально).

Например: https://jsfiddle.net/Buleria28/kqu69aqt/

Или, если это проще просмотреть здесь. Почему эта работа?:

function numDisplay (){
var e = document.getElementById("numVal").value;
document.getElementById("show").innerHTML = e;
}

document.getElementById("calcBtn").addEventListener("click",numDisplay);

И почему эта работа не будет?:

var e = document.getElementById("numVal").value;
function numDisplay (){
document.getElementById("show").innerHTML = e;
}

document.getElementById("calcBtn").addEventListener("click",numDisplay);

Соответствующий HTML:

<form method = "POST">
<fieldset>          
<label for="numVal">Enter Number Value:</label>
<input type="number" id="numVal" name="numVal"/>
</fieldset>
</form>

Мне любопытно, потому что я хотел бы использовать пользовательский ввод для найденного в переменной "e" в разных функциях.

user3063771 10 июнь 2017, в 20:23

Источник

Теги:

javascript

variables

local

global

4 ответа

0

Функция numDisplay() работает некорректно, если e является глобальной переменной, потому что numDisplay() запускается при нажатии #calcBtn.

Скажем, вы вводите номер 5 в поле ввода и нажмите кнопку "Показать номер". Это запускает numDisplay() и устанавливает HTML в #show в e. Тем не менее, e никогда не получил номер 5. Он по-прежнему имеет пустое значение, которое было присвоено ему при загрузке страницы. Чтобы он получал новые значения каждый раз, когда вы нажимаете кнопку, var e = document.getElementById("numVal").value; должен находиться внутри функции.

Daksh Shah 10 июнь 2017, в 16:48

0

Проблема заключается в том, когда выполняется код сценария. Если вы установите глобальную переменную как это, и она равна нулю

var e = document.getElementById("numVal").value;

Затем он, вероятно, выполняется до того, как браузер создаст эту часть страницы.

Вы можете использовать глобальные переменные, которые вы указали на число или строку таким образом, поскольку это не зависит от страницы/документа:

var number_of_puffins = 11;

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

<body onLoad="setglobals();">

Будьте осторожны с использованием кода, подобного вашему примеру, поскольку страница может измениться, если вы добавляете или удаляете элементы.

Dave S 10 июнь 2017, в 16:35

0

Оба ваших варианта работают так, как планировалось.

Разница - это значение.

Когда вы запускаете сценарий в первый раз, на входе нет значения, но когда вы запускаете его внутри функции, у него есть значение.

Вы можете изменить, когда вы вызываете значение, то есть:

var e = document.getElementById("numVal"); //Remove the .value
/*why won't having the variable above rather than inside
the function work?*/

function numDisplay (){
//var e = document.getElementById("numVal").value;
document.getElementById("show").innerHTML = e.value; //use it here.
}

document.getElementById("calcBtn").addEventListener("click",numDisplay);

Ziv Weissman 10 июнь 2017, в 14:50

Ещё вопросы

Shadowfool · Accepted Answer · 2017-06-10T15-06-00.000Z

В случае:

var e = document.getElementById("numVal").value;
function numDisplay (){
   document.getElementById("show").innerHTML = e;
}
document.getElementById("calcBtn").addEventListener("click",numDisplay);

e вычисляется во время выполнения, поэтому значение не имеет значения, которое затем сохраняется как e (ваше начальное значение.) Однако внесение незначительного изменения в ваш код может сделать эту работу.

var e = document.getElementById("numVal");
function numDisplay (){
   document.getElementById("show").innerHTML = e.value;
}
document.getElementById("calcBtn").addEventListener("click",numDisplay);

В этом примере значение e находится на каждом клике, который затем отображает текущее значение и устанавливает его как innerHTML вашего элемента "show".