Почему я не могу получить данные из поля ввода? - PullRequest
Новая
       1

Почему я не могу получить данные из поля ввода?

0 голосов
/ 28 марта 2019

Я сделал следующий код, чтобы получить ввод из поля ввода.Тем не менее, он не может получить вход?Почему? 

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, но ничего не выводится.

Ответы [ 6 ]

1 голос
/ 28 марта 2019

Потому что вы не можете получить входное значение, но вы можете получить его следующим образом. 

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";
    }
}
0 голосов
/ 28 марта 2019

Вот ваш идеальный код: 

<!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)"> *

0 голосов
/ 28 марта 2019

Получить значение ввода внутри функции 

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>
0 голосов
/ 28 марта 2019

Вы читаете значение при загрузке страницы и сохраняете его в переменной.

Когда происходит событие изменения, вы сравниваете сохраненное значение со своими жестко запрограммированными строками.

Считать значение ввода внутри обработчика события .

0 голосов
/ 28 марта 2019

Поскольку вы должны получить ввод 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;
}
0 голосов
/ 28 марта 2019

Ваш ввод имеет пустое значение при загрузке страницы. Когда вызывается функция, внутри функции вычисляется пустое значение . Последнее значение из input не входит в функцию. Вы должны принять значение 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...