Не работает потому, что простые объекты передаются не по ссылке, а значением. Вкратце:
// ты инициализируешь переменную str сразу после загрузки DOM
// на данный момент она равна пустой строке
var str = document.getElementById("name").value;
// ты инициализируешь функцию
function NameValidate() {
// пытаешься получить значение переменной str
// так как она передалась значением, то сама по себе она не изменяется
// и до сих пор равна пустой строке
if (str == ''){
// а это значит, что все работает правильно
alert("Введите имя!");
}
}
Если же мы хотим избежать подобной ситуации, то нам необходимо либо сделать функцию для извлечения этой переменной, либо передавать ее родительский объект.
// input - объект, который передан по ссылке
var input = document.getElementById("name");
function NameValidate() {
if (input.value == ''){
alert("Введите имя!");
}
}
или:
// str - функция, вытаскивающая свойство из объекта
var str = function() {
return document.getElementById("name").value;
};
function NameValidate() {
if (str() == ''){
alert("Введите имя!");
}
}
или:
function NameValidate() {
// вытаскиваем значение сразу после клика
// минус - повторный поиск элемента в дереве DOM
// каждый раз при клике на кнопку
var str = document.getElementById("name").value;
if (str == ''){
alert("Введите имя!");
}
}
Респект тебе, что изучаешь JS не вникая в jQuery. А то сейчас столько народу, что и не скажут тебе, что делает getElementById :)
Также, совет: не пиши
str == '' Достаточно писать просто
if(str)
Это работает потому, что в JS любой тип можно привести к булеву значению. Пустая строка, undefined, null и 0 - это все false. Остальное - true.
