Question

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

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>

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

Answer 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";
    }
}

Answer 2

您的输入在页面加载时具有空值。调用该函数时，将在函数内部评估空的 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>

Answer 3

因为每次运行函数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;
}

Answer 4

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

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

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

Answer 5

在函数内部获取输入值

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>

Answer 6

这是您的理想代码：

<!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 个答案: