javascript 如何引用visualforce中指定的html元素id并传递给javascript函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4190072/
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
How to refer html element id specified in visualforce and pass onto javascript function?
提问by Meow
I have apex tag that generate input text field.
我有生成输入文本字段的顶点标签。
<apex:page id="my_page">
<apex:inputText id="foo" id="c_txt"></apex:inputText>
</apex:page>
When someone clicks this field, I want to execute javascript.
当有人单击此字段时，我想执行 javascript。
But when I check the HTML source, this apex tag which becomes input tag has (I think) dynamically generated part.
但是当我检查 HTML 源代码时，这个成为输入标签的顶点标签具有（我认为）动态生成的部分。
<input type="text" size="50" value="Tue Nov 16 00:00:00 GMT 2010"
name="j_id0:j_id3:j_id4:c_txt" id="j_id0:j_id3:j_id4:c_txt">
As you can see id has junk part :(
正如你所看到的 id 有垃圾部分:(
id="j_id0:j_id3:j_id4:c_txt"
In my Javascript I'm trying to getElementById('c_txt')but this does not work of course. How to deal with this???
在我的 Javascript 中，我正在尝试，getElementById('c_txt')但这当然不起作用。这个怎么处理？？？
UPDATE
更新
Seems like I can do this but not working...
好像我可以做到这一点，但不工作...
<apex:includeScript value="{!URLFOR($Resource.datepickerjs)}"></apex:includeScript>
<apex:inputText id="foo" id="c_txt" onclick="javascript:displayDatePicker()" />
datepickerjs
日期选择器
var elem = getElementById('c_txt');
alert(elem);
The alert shows 'null' so something must be wrong.
警报显示“空”，所以一定有问题。
Even this alert returns null...
即使这个警报返回空...
var targetDateField = document.getElementById('{!$Component.my_page:c_txt}');
alert(targetDateField);
采纳答案by Meow
I got solution to my problem.
我得到了解决我的问题的方法。
$Compoent global visualforce expression can only be used in visualforce code not inside of Javascript as far as my search.
就我的搜索而言，$Compoent 全局visualforce 表达式只能在visualforce 代码中使用，而不是在Javascript 内部。
Below code works fine. It outputs the value in the inputText field to js alert message Now you can pass id attribute to the Javascript and process whatever the task needed.
下面的代码工作正常。它将 inputText 字段中的值输出到 js 警报消息 现在您可以将 id 属性传递给 Javascript 并处理所需的任何任务。
Created Date: <apex:inputText id="dah" value="{!created}" size="50"
onclick="javascript:go('{!$Component.dah}')"></apex:inputText>
<script>
function go(field) {
var huh = document.getElementById(field).value;
alert(huh); //returns the string u put inside of input text field
}
</script>
回答by Matt Lacey
You can use the $Componentnotation in javascript, you use it like so:
您可以$Component在 javascript 中使用该符号，您可以像这样使用它：
var e = document.getElementById("{!$Component.ComponentId}");
One thing to be wary of though, is if your element is contained within several levels of Visualforce tags which have IDs:
但是要注意的一件事是，如果您的元素包含在具有 ID 的多个级别的 Visualforce 标签中：
<apex:pageBlock id="theBlock">
<apex:pageBlockSection id="theBlockSection">
<apex:commandLink action="{!someAction}" value="LINK!" id="theLink"/>
// snip
// in javascript you would reference this component using:
document.getElementById("{!$Component.theBlock.theSection.theLink}");
