Html 将元素 ID 传递给 Javascript 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17292176/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pass element ID to Javascript function
提问by Hamed Kamrava
I have seen many threads related to my question title.
我已经看到许多与我的问题标题相关的主题。
Here is HTML Codes :
这是 HTML 代码：
<button id="button1" class="MetroBtn" onClick="myFunc(this.id);">Btn1</button>
<button id="button2" class="MetroBtn" onClick="myFunc(this.id);">Btn2</button>
<button id="button3" class="MetroBtn" onClick="myFunc(this.id);">Btn3</button>
<button id="button4" class="MetroBtn" onClick="myFunc(this.id);">Btn4</button>
And a very simple JS function is here :
这里有一个非常简单的 JS 函数：
function myFunc(id){
alert(id);
}
You can see in JsFiddle.
你可以在JsFiddle 中看到。
The problem is :
问题是 ：
I have no idea, maybe doesn't pass this.idto myFuncfunction, or some problem else.
我不知道，也许没有传递this.id给myFunc函数，或者其他一些问题。
What's the problem ?
有什么问题 ？
Any help would be appreciated.
任何帮助，将不胜感激。
采纳答案by RobH
In jsFiddle by default the code you type into the script block is wrapped in a function executed on window.onload:
默认情况下，在 jsFiddle 中，您在脚本块中键入的代码包含在一个在 window.onload 上执行的函数中：
<script type='text/javascript'>//<![CDATA[
window.onload = function () {
function myFunc(id){
alert(id);
}
}
//]]>
</script>
Because of this, your function myFuncis not in the global scope so is not available to your html buttons. By changing the option to No-wrap in <head>as Sergio suggests your code isn't wrapped:
因此，您的函数myFunc不在全局范围内，因此对您的 html 按钮不可用。通过将选项更改No-wrap in <head>为 Sergio 建议您的代码未包装：
<script type='text/javascript'>//<![CDATA[
function myFunc(id){
alert(id);
}
//]]>
</script>
and so the function is in the global scope and available to your html buttons.
因此该函数在全局范围内并且可用于您的 html 按钮。
回答by MisterBla
This'll work:
这将工作：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function myFunc(id)
{
alert(id);
}
</script>
</head>
<body>
<button id="button1" class="MetroBtn" onClick="myFunc(this.id);">Btn1</button>
<button id="button2" class="MetroBtn" onClick="myFunc(this.id);">Btn2</button>
<button id="button3" class="MetroBtn" onClick="myFunc(this.id);">Btn3</button>
<button id="button4" class="MetroBtn" onClick="myFunc(this.id);">Btn4</button>
</body>
</html>
回答by Sergio
Check this: http://jsfiddle.net/h7kRt/1/,
检查这个：http: //jsfiddle.net/h7kRt/1/，
you should change in jsfiddle on top-left to No-wrap in <head>
您应该将左上角的 jsfiddle 更改为 No-wrap in <head>
Your code looks good and it will work inside a normal page. In jsfiddle your function was being defined inside a load handler and thus is in a different scope. By changing to No-wrap you have it in the global scope and can use it as you wanted.
您的代码看起来不错，它可以在普通页面中工作。在 jsfiddle 中，您的函数是在加载处理程序中定义的，因此在不同的范围内。通过更改为 No-wrap，您可以在全局范围内使用它，并且可以根据需要使用它。
回答by Khan Usama
you can use this.
你可以用这个。
<html>
<head>
<title>Demo</title>
<script>
function passBtnID(id) {
alert("You Pressed: " + id);
}
</script>
</head>
<body>
<button id="mybtn1" onclick="passBtnID('mybtn1')">Press me</button><br><br>
<button id="mybtn2" onclick="passBtnID('mybtn2')">Press me</button>
</body>
</html>
回答by eaglei22
The problem for me was as simple as just not knowing Javascript well. I was trying to pass the name of the id using double quotes, when I should have been using single. And it worked fine.
对我来说，问题很简单，就是不太了解 Javascript。当我应该使用单引号时，我试图使用双引号传递 id 的名称。它工作得很好。
This worked:
这有效：
validateSelectizeDropdown('#PartCondition')
This did not:
这没有：
validateSelectizeDropdown("#PartCondition")
And the function:
和功能：
function validateSelectizeDropdown(name) {
if ($(name).val() === "") {
//do something
}
}
