Javascript突然读不到值

Question

我正在编写一个客户端应用程序，该应用程序提供的成分将为您提供鸡尾酒配方。输入后，您单击一个按钮将搜索成分。如果输入 "all"，您将被重定向到包含所有食谱的页面。

我刚刚开始这个，所以请注意所有功能是我完成的唯一部分。它工作正常。作为练习，当你输入 "all" 时，它会重定向到 facebook 的 url。不知从何而来（没有新的变化）它开始向我抛出一个错误，它没有读取输入，而是将其读取为 null。

相关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 变量。该变量仅包含特定时间点的值。避免此类问题的最简单方法是在需要时正确获取值，而不是提前一段时间。

Javascript突然读不到值

Javascript suddenly can not read value

html

javascript

jquery

getelementbyid