警告输入类型编号的值

Here is the code that I am having problems with. Below it I'll add an explanation:

这是我遇到问题的代码。在它下面我将添加一个解释：

$(function() {
	var $input = $("#input");
	var input = $input.val();
	var $go = $("#go");

	$go.click(function() {
		alert(input);
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
	<input type="number" id="input">
	<button type="button" id="go">GO!</button>
</main>

The code above is a dummie example to represent my actual question, no more background is needed.

上面的代码是一个dummie示例来表示我的实际问题，不再需要背景知识。

So I have one input type="number" id="input" in which you input a number, and a button type="button" id="go".

所以我有一个输入类型=“数字”id =“输入”，你输入一个数字，按钮类型=“按钮”id =“go”。

In my jQuery, I first declare $input which holds the element #input, then input which holds the value of the element #input, and finally $go which holds the element #go.

在我的jQuery中，我首先声明$ input，其中包含元素#input，然后输入保存元素#input的值，最后是$ go，其中包含元素#go。

Below that I have a function, that says that when I click on #go, I should be able to alert(input).

下面我有一个功能，说当我点击#go时，我应该能够提醒（输入）。

Now, this code does not do that. In my head this makes perfect sense, but apparently it doesn't work.

现在，这段代码不会这样做。在我的脑海中这是完全合理的，但显然它不起作用。

2 个解决方案

#1

That is because you are declaring input outside the click function, which means the value (simply an empty string) is set at runtime and will not be updated. You should define input within your click event handler:

这是因为您在click函数之外声明输入，这意味着值（只是一个空字符串）在运行时设置，不会更新。您应该在click事件处理程序中定义输入：

$(function() {
  var $input = $("#input");
  var $go = $("#go");

  $go.click(function() {
    var input = $input.val();
    alert(input);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
  <input type="number" id="input">
  <button type="button" id="go">GO!</button>
</main>

#2

First of all, * seems to block alerts origination from the code snippet, it will be much easier to output them to the console instead so you can keep track of things.

首先，*似乎阻止了代码片段中的警报来源，将它们输出到控制台会更容易，因此您可以跟踪事物。

Your code can be simplified way down without the need for many variables.

您的代码可以简化，无需多个变量。

But your main problem was the fact that the input value was not getting reset when the click event happened but was getting picked up on page load, meaning it would be stuck at ''.

但是你的主要问题是当点击事件发生时输入值没有被重置但是在页面加载时被拾取，这意味着它将被卡在''。

$(function() {
  $("#go").click(function() {
    var input = $("#input").val();
    console.log(input);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
  <input type="number" id="input">
  <button type="button" id="go">GO!</button>
</main>

#1