Javascript 如何正确地提醒我的变量_Javascript_Jquery

Javascript 如何正确地提醒我的变量

javascript jquery

Javascript 如何正确地提醒我的变量,javascript,jquery,Javascript,Jquery,我对Jquery有相当好的理解，但决定深入研究JavaScript，因为我不了解“原始”JavaScript我的问题是：在加载文档时，我的函数执行良好，并发出警报：“嗨，我的名字是John”，但在单击按钮时，警报只是：“嗨，我的名字是”。我的问题是为什么会发生这种情况，我如何解决它我知道我可以通过将变量放入函数中来修复它，但是有没有办法调用在函数外声明的第一个变量（脚本类型后面的变量）？我的代码： <!DOCTYPE html> <head> <script t

我对Jquery有相当好的理解，但决定深入研究JavaScript，因为我不了解“原始”JavaScript
我的问题是：在加载文档时，我的函数执行良好，并发出警报：“嗨，我的名字是John”，但在单击按钮时，警报只是：“嗨，我的名字是”。我的问题是为什么会发生这种情况，我如何解决它
我知道我可以通过将变量放入函数中来修复它，但是有没有办法调用在函数外声明的第一个变量（脚本类型后面的变量）？

我的代码：

<!DOCTYPE html>
<head>
<script type="text/javascript">

//If I try to call this variable WILL NOT WORK:(

var name ='John'; <--SO HOW CAN I CALL THIS VARIABLE TO MY CLICK FUNCTION?--> 

function displayName(name)
{
//If I put my variable like this WILL WORK fine...
//var name ='John';
alert('Hi I am '+name);

}

//This function works on document load
//displayName(name);
</script>
</head>
<body>

<!--This doesn't work well if variable is OUTSIDE my function:(-->
<button type="button" onclick="displayName(name)">Display Name</button>
</body>
</html>

var name ='John'; 

function displayName()
{
alert('Hi I am '+name);

}

</script>
</head>
<body>

<button type="button" onclick="displayName()">Display Name</button>
</body>
</html>


//如果我尝试调用此变量将不起作用：(
var name='John'；
函数displayName（名称）
{
//如果我把我的变量放在这里，它会工作的很好。。。
//var name='John'；
警惕（‘你好，我是’+姓名）；
}
//此函数适用于文档加载
//显示名称（名称）；
显示名称

您的代码实际上很好，您刚刚为一个全局名称选择了一个不幸的名称：

名称

。如果您将其更改为其他名称（如

foo

），它可以工作：

var name ='John'; 

function displayName()
{
alert('Hi I am '+name);

}

</script>
</head>
<body>

<button type="button" onclick="displayName()">Display Name</button>
</body>
</html>

原因有点模糊。全局变量成为

窗口

对象的属性。但是

窗口

对象已经有一个名为

名称

的属性，这是窗口的名称。我很惊讶地发现您的代码不起作用，因为我本来希望您的代码覆盖窗口的属性名称。但显然不是。（这是一个很好的例子，说明了为什么最好避免使用全局变量。）无论如何，选择一个不同的变量名，一个与现有的

name

属性不冲突的变量名，对其进行排序

var name ='John'; 

function displayName()
{
alert('Hi I am '+name);

}

</script>
</head>
<body>

<button type="button" onclick="displayName()">Display Name</button>
</body>
</html>

但是您在代码中做了一些不明显的事情，所以让我们更深入地研究一下（这里我使用

foo

版本以避免混淆）：

var name ='John'; 

function displayName()
{
alert('Hi I am '+name);

}

</script>
</head>
<body>

<button type="button" onclick="displayName()">Display Name</button>
</body>
</html>

在您的HTML中：

<!-- Here, `foo` refers to the global variable -->
<button type="button" onclick="displayName(foo)">Display Name</button>

var name ='John'; 

function displayName()
{
alert('Hi I am '+name);

}

</script>
</head>
<body>

<button type="button" onclick="displayName()">Display Name</button>
</body>
</html>

并且HTML保持不变：

<!-- Here, `foo` refers to the global variable -->
<button type="button" onclick="displayName(foo)">Display Name</button>

var name ='John'; 

function displayName()
{
alert('Hi I am '+name);

}

</script>
</head>
<body>

<button type="button" onclick="displayName()">Display Name</button>
</body>
</html>

注意我们是如何自由地使用

name

，因为我们没有创建或与globals交互。还要注意，我将代码放在按钮后面，因为代码假定按钮已经存在

var name ='John'; 

function displayName()
{
alert('Hi I am '+name);

}

</script>
</head>
<body>

<button type="button" onclick="displayName()">Display Name</button>
</body>
</html>

更好的方法是使用

addEventListener

或

attachEvent

连接处理程序

var btn = document.getElementById("theButton");
if (btn.addEventListener) {
    btn.addEventListener("click", handler, false);
}
else if (btn.attachEvent) {
    btn.attachEvent("onclick", handler);
}
else {
    // Punt!
    btn.onclick = handler;
}

function handler() {
    display(name);
}

var name ='John'; 

function displayName()
{
alert('Hi I am '+name);

}

</script>
</head>
<body>

<button type="button" onclick="displayName()">Display Name</button>
</body>
</html>

正如您所见，我们必须同时处理这两个问题，因为旧版本的IE（或“兼容模式”中的新版本）没有

addEventListener

。这是使用jQuery之类的库的原因之一，但我知道您试图在没有它的情况下扩展您的理解，这是有充分理由的。最好的理由

var name ='John'; 

function displayName()
{
alert('Hi I am '+name);

}

</script>
</head>
<body>

<button type="button" onclick="displayName()">Display Name</button>
</body>
</html>

最后，你问：

var name ='John'; 

function displayName()
{
alert('Hi I am '+name);

}

</script>
</head>
<body>

<button type="button" onclick="displayName()">Display Name</button>
</body>
</html>

我知道我可以通过将变量放入函数中来修复它，但是有没有办法调用在函数外声明的第一个变量（脚本类型后面的变量）

var name ='John'; 

function displayName()
{
alert('Hi I am '+name);

}

</script>
</head>
<body>

<button type="button" onclick="displayName()">Display Name</button>
</body>
</html>

上面没有一个答案是：：-）答案是：是的，您可以直接引用它，方法是删除隐藏全局变量的参数：

var name ='John'; 

function displayName()
{
alert('Hi I am '+name);

}

</script>
</head>
<body>

<button type="button" onclick="displayName()">Display Name</button>
</body>
</html>


var foo='John'；
//注意：未声明任何参数
函数displayName（）
{
//因为这个论点并不影响它，我们可以参考
//到foo，因为foo是在*封装中声明的
//上下文*
警惕（“你好，我是”+foo）；
}
显示名称

Arhhh被打败了，他打算说使用名字是个错误的选择：

var name ='John'; 

function displayName()
{
alert('Hi I am '+name);

}

</script>
</head>
<body>

<button type="button" onclick="displayName()">Display Name</button>
</body>
</html>

试试这个：

var name ='John'; 

function displayName()
{
alert('Hi I am '+name);

}

</script>
</head>
<body>

<button type="button" onclick="displayName()">Display Name</button>
</body>
</html>

var name ='John'; 

function displayName()
{
alert('Hi I am '+name);

}

</script>
</head>
<body>

<button type="button" onclick="displayName()">Display Name</button>
</body>
</html>

var name='John'；
函数displayName（）
{
警惕（‘你好，我是’+姓名）；
}
显示名称

回答得很好！谢谢你，谢谢！！这很好！另一件事是，OP无法访问全局变量，因为它被一个局部变量隐藏。但是，由于他通过函数调用传递了全局变量，所以无论如何都应该有效。@DejoDekic:不客气！我在最后加了一张便条，回答了你问题中的一个问题，我一开始没有看到这个问题。最好的，