Не могу в переменную занести значение из input

186

03 февраля 2019, 09:30

Вот весь код. Сколько бьюсь не помогает. Хочу что бы данные сохранились в переменную. По при выводе этой переменной (alert) получаю undefined.

var x = document.getElementById('loginField').value; 
function log_in_click(){ 
    alert(x); 
}

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8" /> 
  <title>Page Title</title> 
  <link rel="stylesheet" href="D:\ВЛАД\Projects VisualStudio\Repositories\Сайты\MyWebSite\style.css" /> 
  <script src="D:\ВЛАД\Projects VisualStudio\Repositories\Сайты\MyWebSite\script.js"></script> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
   </head> 
<body> 
  <form> 
    <br> 
    <input type="text" id="loginField" placeholder="Login..." value=""> 
    <br> 
    <input type="text" id="passField" placeholder="Password..." class="inputs"> 
    <br> 
    <a href="#" id="log_in" class="button_login" onclick="log_in_click()">Login</a> 
  </form> 
</body> 
</html>

Вот вывод в Chrome

Answer 1

Все потому-что вы берете значение переменной в момент ее инициализации, следовательно изначально в инпуте нет значения.

function log_in_click(){ 
  var x = document.getElementById('loginField').value; 
    alert(x); 
}

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8" /> 
  <title>Page Title</title> 
  <link rel="stylesheet" href="D:\ВЛАД\Projects VisualStudio\Repositories\Сайты\MyWebSite\style.css" /> 
  <script src="D:\ВЛАД\Projects VisualStudio\Repositories\Сайты\MyWebSite\script.js"></script> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
   </head> 
<body> 
  <form> 
    <br> 
    <input type="text" id="loginField" placeholder="Login..." value=""> 
    <br> 
    <input type="text" id="passField" placeholder="Password..." class="inputs"> 
    <br> 
    <a href="#" id="log_in" class="button_login" onclick="log_in_click()">Login</a> 
  </form> 
</body> 
</html>