需要有关 getInput 功能的帮助答案

【问题标题】：Need help for a getInput function需要有关 getInput 功能的帮助
【发布时间】：2015-02-20 16:46:24
【问题描述】：

我的 javascript 代码有问题。

<!DOCTYPE html>
<html>
    <head>
        <title>js-game</title>
        <script src="script.js" type="text/javascript"></script>
        <script src="story.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css"/>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="game">
            <ul id="output">
                <li onclick="main()">Click here to start!</li>
            </ul>
            <input autofocus id="inputLine" type="text">
            <p onclick="" id="enterInput">ENTER</p>
        </div>
    </body>
</html>



// Variables
var log="<li>Hello</li>";
var lastVar="";

// Functions
function getInput() {
    document.getElementById("enterInput").addEventListener("click", function() {
        return document.getElementById("inputLine").value;
        document.getElementById("inputline").value="";
    });
}
function output(output) {
    log=log + "<li>" + output + "</li>";
    document.getElementById("output").innerHTML=log;
}
function main() {
    output("What's your name?");
    alert(getInput());
}

正如您可能看到的，我想从 ID 为 inputLine 的 <input type="text"> 获取输入。还有一个 id 为 enterInput 的按钮。

但我得到的只是未定义的，而且我已经为此工作了很长时间，所以我感到很沮丧。

抱歉英语不好。

【问题讨论】：

我们能看到 HTML 吗？
您设置 .value 的行将永远无法到达，因为您在它之前执行 return 语句，事件回调也不会返回任何内容
这行不通，因为你不能像那样使用return。具体来说，在单击按钮并且有输入之前，您不能使解释器停止。也许你想要一个承诺或什么？
我认为你应该添加click eventListener 和函数getInput
我们能看到剩下的 JS 吗？据我所知，从未调用过“getInput()”。

标签： javascript html web

【解决方案1】：

尝试这样做：

document.getElementById("enterInput").addEventListener("click", getInput );

function getInput() {
    var val = document.getElementById("inputLine").value;
    //do something with val
    document.getElementById("inputLine").value="";
    return val;
}

见this demo

或者使用getInput()将其作为变量获取：

document.getElementById("enterInput").addEventListener("click", function(event){
    var val = getInput();
    alert(val);
});

function getInput() {
    var val = document.getElementById("inputLine").value;
    document.getElementById("inputLine").value="";
    return val;
}

见this demo

【讨论】：

但是如果我不想像变量 fx 那样调用我的函数，这将如何工作。 var playerName=getInput();?
为什么getInput(e)中有一个e？
哦，没必要——它只是指点击事件对象。我编辑了它，所以你可以像变量一样调用它并添加返回值 (return val;)
我更改了this fiddle 来演示。请注意，return 调用必须在您要执行的任何代码之后。
但如果我这样做我喜欢这样：var playerName=getInput();它不会等待将变量设置为您编写的任何内容。对不起，如果我听起来像个混蛋，只是看到我看起来多么傲慢。