Javascript вдруг не может прочитать значение

Question

Я в процессе написания приложения на стороне клиента, который дал ингредиенты, даст вам рецепт коктейля. Когда вы вводите, вы нажимаете на кнопку, которая будет искать ингредиенты. Если введено «все», вы будете перенаправлены на страницу со всеми рецептами.

Я только что начал это, так что все функции - это единственная часть, которую я сделал. Он работал нормально. Для практики у меня было это, когда вы ввели «все», это перенаправило бы URL-адрес facebook. Из ниоткуда (без новых изменений) он начал бросать мне сообщение об ошибке, он не читал ввод, он читал его как нуль.

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

<input type="text" id="alcohol"> 
<h4 class="btn" type="submit" onclick="whole()"> Search</h4> 

JS:

var input = document.getElementById('alcohol').value; 

function whole() { 
    if (input == "all") { 
     window.location = "http://www.facebook.com"; 
    }; 
}; 

Что здесь происходит? Почему она перестала работать?

Answer 1

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

Вы можете изменить это, чтобы сделать whole() функцию работы с текущим значением поля алкоголя:

function whole(){ 
    var input = document.getElementById('alcohol').value; 
    if (input =="all"){ 
     window.location="http://www.facebook.com"; 
    }; 
    }; 

Помните, что это:

var input = document.getElementById('alcohol').value; 

получает текущее значение в то время, строка кода запускается. Любые будущие изменения этого поля не будут влиять на переменную input. Эта переменная содержит значение только из определенного момента времени. Самый простой способ избежать таких проблем - просто получить правильное значение, когда оно вам понадобится, а не какое-то время раньше.