为什么我无法从输入框中获取输入？答案

【问题标题】：Why can't I get the input from the input box?为什么我无法从输入框中获取输入？
【发布时间】：2019-03-28 11:08:06
【问题描述】：

我编写了以下代码来从输入框中获取输入。但是，它无法获取输入？为什么？

var p = document.getElementById("paragraph");
var input = document.getElementById("input").value;
var foodname;

function changeP() {
  alert(input);
  if (input === "abc") {
    foodname = "Hey Yo!";
  } else if (input === "def") {
    foodname = "!oY yeH";
  } else {
    foodname = "N/A";
  }
  p.innerText = foodname;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Input Detecting</title>
</head>

<body>
  <p id="paragraph">Please type in the code in the following input bar. </p>
  <input id="input">
  <button onClick="changeP()">Confirm</button>
  <script src="JavaScript.js"></script>
</body>

</html>

当我输入 abc 时，我预计警报将是 Hey Yo!，但它什么也不输出。

【问题讨论】：

input.value === "abc"
尝试理解变量的全局和局部范围

标签： javascript html input

【解决方案1】：

因为你无法获取输入值但你可以这样拥有它。

function changeP() {
var foodname;
  var input = document.getElementById("input").value;
    if (input === "abc") {
        foodname = "Hey Yo!";
    } else if (input === "def") {
        foodname = "!oY yeH";
    } else {
        foodname = "N/A";
    }
}

【讨论】：

【解决方案2】：

因为你必须得到输入value，所以每次运行函数changeP()。
现在，您在页面加载时获取值，因此该值始终为 null

//This is JavaScript.js

function changeP() {
    var p = document.getElementById("paragraph");
    var input = document.getElementById("input").value;
    var foodname;

    alert(input);
    if (input === "abc") {
        foodname = "Hey Yo!";
    } else if (input === "def") {
        foodname = "!oY yeH";
    } else {
        foodname = "N/A";
    }
    p.innerText = foodname;
}

【讨论】：

【解决方案3】：

您正在读取页面加载时的值并将其存储在变量中。

当更改事件触发时，您将存储的值与硬编码的字符串进行比较。

在事件处理程序中读取输入的值。

【讨论】：

【解决方案4】：

获取函数内部输入的值

function changeP() {
var p = document.getElementById("paragraph");

var input = document.getElementById("input").value;
var foodname;
	alert(input);
	if (input === "abc") {
		foodname = "Hey Yo!";
	} else if (input === "def") {
		foodname = "!oY yeH";
	} else {
		foodname = "N/A";
	}
	p.innerText = foodname;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Input Detecting</title>
	</head>
	
	<body>
		<p id="paragraph">Please type in the code in the following input bar. </p>
		<input id="input">
		<button onClick="changeP()">Confirm</button>
		<script src="JavaScript.js"></script>
	</body>
</html>

【讨论】：

【解决方案5】：

这是您的完美代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Input Detecting</title>
    </head>

    <body>
        <p id="paragraph">Please type in the code in the following input bar. </p>
        <input id="input">
        <button onClick="changeP()">Confirm</button>
        <script>
            //This is JavaScript.js
            function changeP() {
                var p = document.getElementById("paragraph");
                var input = document.getElementById("input").value;
                var foodname;
                alert(input);
                if (input === "abc") {
                    foodname = "Hey Yo!";
                } else if (input === "def") {
                    foodname = "!oY yeH";
                } else {
                    foodname = "N/A";
                }
                p.innerText = foodname;
            }
        </script>
    </body>
</html>

你最大的错误是你试图在函数内部使用参数并且你在函数外部声明了它们。请记住，函数内部的变量始终充当函数的局部变量，它不能在外部产生影响。您在函数外部声明的那些参数无法在函数内部访问，除非您通过 onClick="changeP(inputselecter, anotherselector, anotherselecter)">

等参数将它们传递到函数中

【讨论】：

【解决方案6】：

您的输入在页面加载时具有空值。当函数被调用时，空 value 在函数内部被评估。 input 的最新 value 不在函数内部。您必须在函数中获取 input 值：

var foodname;
function changeP() {
  var input = document.getElementById("input").value;
  .....

var p = document.getElementById("paragraph");
var foodname;
function changeP() {
    var input = document.getElementById("input").value;
    alert(input);
    if (input === "abc") {
        foodname = "Hey Yo!";
    } else if (input === "def") {
        foodname = "!oY yeH";
    } else {
        foodname = "N/A";
    }
    p.innerText = foodname;
}

<p id="paragraph">Please type in the code in the following input bar. </p>
<input id="input">
<button onClick="changeP()">Confirm</button>

【讨论】：