HTML输入字段到Javascript功能到控制台

Question

我试图将输入从输入字段回显到控制台，但不能在HTML字段之外打印输入，这里有一个例子:

function getInput(input) {
	var input = document.getElementById("EchoInput").value;
  console.log(input);
}
//These are the "external" inputs I'd like to print in the console.
getInput("test");
getInput("one");
getInput("two");

<input type="text" id="EchoInput" onblur="getInput()">

正如您所看到的，使用document.getElementById("EchoInput").value;确实可以工作，但是当使用"test"，"one"one_answers"two"输入测试该函数时，它不起作用。

我是代码新手，但相信这里有一个变量范围的问题，getElementById().value;接管了底部的三个函数。

打印底部函数的另一种替代方法是删除事件处理程序，但使输入字段undefined失败。

是否有办法同时接受两个输入?

非常感谢您的帮助，我在这里寻找答案，并找到了使用JQuery或类似的高级解决方案，我不理解，如果这是一个反复出现的问题，我深表歉意。

欢呼。

k .

Answer 1

您可以使用"自调用函数"来调用getInput和更多您不需要document.GetElementById语句。

直接用onblur="getInput(this.value)"

<input type="text" id="EchoInput" onblur="getInput(this.value)">

Javascript

function getInput(input) {
  console.log(input);
}
(function() {
  //These are the "external" inputs I'd like to print in the console.
  getInput("test");
  getInput("one");
  getInput("two");
})();

function getInput(input) {
  console.log(input);
}
  
(function() {
  //These are the "external" inputs I'd like to print in the console.
  getInput("test");
  getInput("one");
  getInput("two");
})();

<input type="text" id="EchoInput" onblur="getInput(this.value)">

Answer 2

你可以这样写:

function getInput(input) {
  var value = input || document.getElementById("EchoInput").value;
  console.log(value);
}

如果输入是未定义的(事件调用)，您将从字段中获取值。如果给定了输入(纯函数调用)，则输出给定的值。

Answer 3

问题是当你的页面加载时，你的输入值是空的。
使用默认值进行测试，您将看到三个函数调用记录该值。

在getInput函数中，设置输入ID (字符串)作为参数。如果元素存在，函数将返回该值。

function getInput(elementId) {
  var element = document.getElementById(elementId);
  var input = element ? element.value : '';
  console.log(input);
}
//These are the "external" inputs I'd like to print in the console.
getInput("EchoInput");
getInput("");
getInput("test");

<input type="text" id="EchoInput" onblur="getInput(this.id)" value="test">