Question

我有一个包含输入字段和提交按钮的表单。整个程序取决于提交表格以继续。每个功能只能执行以下一项任务：

获取输入值
输出值

allEvents();

//output(name)

function allEvents(){
  document.getElementById('formOne').addEventListener('submit',getInputValue)
}
 
function getInputValue(e){
  e.preventDefault()
  let name = document.getElementById('inputText').value;
  return name;
}

function output(n){
  console.log(n)
}

<form id="formOne">
  <input type="text" id="name" required>
  <input type="submit" id = "inputText">
</form>

在主程序中提交表单后，如何访问name的值，以便可以将其传递给函数output()。

注意：函数inputText（）只能返回输入名称。

Answer 1

您说过希望每个function做不同的事情。这是一个好主意，但是请看一下此功能：

function getInputValue(e){
  e.preventDefault()
  let name = document.getElementById('inputText').value;
  return name;
}

这仅获得输入值吗？不，这也防止了e的默认行为。但是您也将希望稍后获得输入值。这不仅是获取值，而且还需要设置它。现在，首先，让我们为此定义一个原型。

function InputOutput() {
    var inputs = {}; //This will contain key-value pairs.

    this.setInputValue = function(name, val) {
        inputs[name] = val;
    };

    this.getInputValue(name) {
        return inputs[name];
    }

    this.getNames() {
        var result = [];
        for (var key in inputs) result.push(key);
        return result;
    }
}

现在，让我们实例化并使用它：

//output(name)

function allEvents(){
  document.getElementById('formOne').addEventListener('submit',function(e) {
      e.preventDefault(); //Are you sure you do not want to execute the submit?
      let tag = document.getElementById('inputText');
      let name = tag.name;
      let value = tag.value;
      inputOutput.setInputValue(name, value);
  });
}

var inputOutput = new InputOutput();
allEvents();

，随后您可以使用getNames来获得名称，如下所示：

function output(name) {
    consolge.log(inputOutput.getInputValue(name));
}

并这样称呼它：

output(inputOutput.getNames()[0]);

编辑

当然，您可以通过将很多内容包装到function标签中onload的值body中来避免使用全局变量，但这是一个不同的问题。

Answer 2

由于getInputValue()返回了名称，您可以将其直接传递给output(name)。

allEvents();

function allEvents(){
document.getElementById('formOne').addEventListener('submit',output(getInputValue))
}

function getInputValue(e){
  e.preventDefault()
  let name = document.getElementById('inputText').value;
  return name;
}

function output(n){
  console.log(n)
}

Answer 3

您将必须在函数范围之外声明变量name。

let name

function allEvents(){
  document.getElementById('formOne').addEventListener('submit',getInputValue)
}

function getInputValue(e){
  e.preventDefault()
  name = document.getElementById('inputText').value;
  return name;
}

function output(n){
  console.log(n)
}

output(name)

但是，为什么不从您的output值中调用getInputValue函数呢？

function allEvents(){
  document.getElementById('formOne').addEventListener('submit',getInputValue)
}

function output(n){
  console.log(n)
}

function getInputValue(e){
  e.preventDefault()
  let name = document.getElementById('inputText').value;
  output(name)
  return name;
}

Answer 4

吉米板球。通读所有这些“东西”，我无法决定哪个更混乱。问题，或答案！

看问题：


function allEvents(){
 document.getElementById('formOne').addEventListener('submit',getInputValue)
}

为什么会有人将 Event Listener 添加到 formOne ？表格有什么关系？没用。

继续这个问题，

function getInputValue(e){
  e.preventDefault()
  let name = document.getElementById('inputText').value;
  return name;
}

为什么有人会得到 Element by ID 的 inputText ？严重地。这有什么关系？这本质上是“提交”按钮。您不会在按钮内部找到任何人的名字。

然后是他在问题下方添加的注释……抱歉，没有名为 inputText() 的函数。

现在是第一个答案（有 2 个赞成票的答案）；那应该是 JavaScript 吗？我输入了它，它不运行。基本上每一行都有一个错误。

对于第二个答案（一票赞成），我也输入了该答案。它也不会运行。

我希望原发帖者愿意对他的 HTML 进行修改。因为我尝试在 Internet Explorer 和 Chrome 中运行他的代码，但他们不会将他的 HTML 结构视为相同，因为他的“提交”按钮不包含 value 属性。因此，每个浏览器都必须猜测要插入的值。

因此，如果他将废弃他的“伪提交”按钮，并用真正的提交按钮替换它：

<button type="submit" id="inputText">Submit</button>

另外，请允许我添加一个 HTML 段落标记来打印结果，因为我认为 console.log 应该被禁止。

<p id="outputIDname" ></p>

然后这里是一些实际运行的代码。（而且我还为需要它的人提供了 console.log 语句。）


allEvents( ) ; 

// output(name)


function allEvents( ) { 
    document.querySelector( "#inputText" ).addEventListener( "click", output ) ; 
} 


function output( e ) { 
    e.preventDefault() ; 
    let tempName = getInputValue( ) ; 
    console.log( "name Inside of Output Function = " + tempName ) ; 
    document.querySelector( "#outputIDname" ).innerHTML = tempName ; 
} 


function getInputValue(  ) { 
    let name = document.getElementById( 'name' ).value ; 
    console.log( "name Inside of Input Function = " + name ) ; 
    return name ; 
}

这是修改后的 HTML :

<form id="formOne">
  <input type="text" id="name" required>
  <button type="submit" id="inputText">Submit</button>
</form>

<p id="outputIDname" ></p>

输出如下：

// name Inside of Input Function = John
// name Inside of Output Function = John

// And the here is the output that is printed inside of the
// Paragraph Tag that I added to his HTML structure:

// John

如果你想看看浏览器有多讨厌他的“提交”按钮，试着用他拥有的按钮替换我的“提交”按钮。 Java Script 将不再起作用。

最后一点：Internet Explorer 太笨了，以至于（如果您将我的“提交”按钮替换为他拥有的按钮），Internet Explorer 甚至没有意识到 Java Script 无法正常工作。如果您查看console.log，您会看到Internet Explorer 只是愉快地打印出“John”和“John”，好像没有任何问题。但是段落标签（我添加到页面的）仍然是空的。这只是禁止 console.log 的众多原因之一

从主程序访问事件侦听器回调函数的返回值？

4 个答案: