Question

在HTML表单中，我想在单击按钮时显示用户输入。这是通过调用 JavaScript函数来完成的。用户输入保存在变量中，然后在函数内部使用。问题是，除非在其中定义var，否则该函数不会识别var。

以下是HTML和JS代码。查看（https://dl.dropboxusercontent.com/u/4301151/stackoverflow/varNoDefined.html）

                <p><label>Name:</label>
                <input type="text" name="userName" id="userName" placeholder="e.g John Lewis"/> 
                </p>

                <input type="submit" name="submitButton" value="Display" onclick="run()"/>
                <p>Name Provided: <label id="outputUserName"></label></p>


var userName =  document.getElementById("userName").value;
function run() {document.getElementById("outputUserName").innerHTML = userName;}

如果我在函数中有以下内容，它将正常工作：

document.getElementById("outputUserName").innerHTML = document.getElementById("userName").value;

或者如果我在函数中定义var

我需要var是全局的，所以要将它与其他函数一起使用，而不是多次定义

谢谢。

Answer 1

问题是，除非在其中定义var，否则该函数不会识别var。

不，那不是问题。该变量已被识别，但它没有您想要的值。

您正在尝试在用户输入任何内容之前读取输入的值。 userName只会保留一个空字符串。您可以通过为输入提供默认值来轻松验证这一点：

<input type="text" name="userName" id="userName" value="default value"/>

DEMO

您必须在需要/想要的时刻阅读该值。作为妥协，您可以将DOM元素的引用保持为全局变量：

var userName =  document.getElementById("userName");
function run() {
    document.getElementById("outputUserName").innerHTML = userName.value;
}

也相关：Why does jQuery or a DOM method such as getElementById not find the element?

Answer 2

另一个问题是您需要在正文内容之后加载脚本标记，或者将所有代码放在一个就绪函数中，以便您知道页面已经呈现。使用实际元素之前的脚本，document.getElementById("userName");的查找返回null，因为该元素尚未被浏览器呈现。如果您查看控制台，您应该看到它。

Uncaught TypeError: Cannot read property 'value' of null

在onClick中调用时，未在JavaScript函数内定义global var

2 个答案: