Mar*_*ria 60 javascript text get input
如何在JavaScript中获取输入文本值？
<script language="javascript" type="text/javascript">
lol = document.getElementById('lolz').value;
function kk(){
alert(lol);
}
</script>
<body>
<input type="text" name="enter" class="enter" value="" id="lolz"/>
<input type="button" value="click" OnClick="kk()"/>
</body>
当我把lol = document.getElementById('lolz').value;功能放在外面时kk(),如上图所示,它不起作用,但是当我把它放进去时,它可以工作.谁能告诉我为什么？
PPv*_*PvG 67
在lol其外部定义时,您运行的原因不起作用,原因是在首次运行JavaScript时尚未加载DOM.因此,getElementById将返回null(参见MDN).
您已经找到了最明显的解决方案:通过getElementById在函数内部调用,DOM将在调用函数时加载并准备好,并且元素将像您期望的那样找到.
还有一些其他解决方案.一个是等到整个文档加载,如下所示:
<script type="text/javascript">
var lolz;
function onload() {
lolz = document.getElementById('lolz');
}
function kk(){
alert(lolz.value);
}
</script>
<body onload="onload();">
<input type="text" name="enter" class="enter" value="" id="lolz"/>
<input type="button" value="click" onclick="kk();"/>
</body>
请注意标记的onload属性<body>.(另请注意:标签的language属性<script>已弃用.请勿使用它.)
但是,有一个问题onload:它等到所有东西(包括图像等)都被加载.
另一种选择是等待DOM准备就绪(通常比早得多onload).这可以使用"普通"JavaScript完成,但使用像jQuery这样的DOM库要容易得多.
例如:
<script type="text/javascript">
$(document).ready(function() {
var lolz = $('#lolz');
var kk = $('#kk');
kk.click(function() {
alert(lolz.val());
});
});
</script>
<body>
<input type="text" name="enter" class="enter" value="" id="lolz"/>
<input type="button" value="click" id="kk" />
</body>
jQuery的.ready()将函数作为参数.一旦DOM准备就绪,该函数将立即运行.第二个例子也使用.click()来绑定kk的onclick处理程序,而不是在HTML中进行内联.
nal*_*ply 13
不要以这种方式使用全局变量.即使这可行,但编程风格也不好.您可能会以这种方式无意中覆盖重要数据.改为:
<script type="text/javascript">
function kk(){
var lol = document.getElementById('lolz').value;
alert(lol);
}
</script>
如果你坚持var lol在函数kk之外设置,那么我建议这个解决方案:
<body>
<input type="text" name="enter" class="enter" value="" id="lolz"/>
<input type="button" value="click" OnClick="kk()"/>
<script type="text/javascript">
var lol = document.getElementById('lolz');
function kk() {
alert(lol.value);
}
</script>
</body>
请注意,script元素必须遵循input它引用的元素,因为元素只有getElementById在已经解析和创建时才可查询.
两个示例都可以在jsfiddler中进行测试.
编辑:我删除了language="javascript"属性,因为它已被弃用.请参阅W3 HTML4规范,SCRIPT元素:
不推荐.此属性指定此元素内容的脚本语言.它的值是该语言的标识符,但由于这些标识符不是标准的,因此不推荐使用此属性以支持类型.
和
不推荐使用的元素或属性是较新构造已过时的元素或属性.[...]在将来的HTML版本中,不推荐使用的元素可能会过时.[...]此规范包含说明如何避免使用已弃用元素的示例.[...]
编辑:
注意这一行:
lol = document.getElementById('lolz').value;
在<input>标记的实际元素之前:
<input type="text" name="enter" class="enter" value="" id="lolz"/>
您的代码将逐行解析,并lol = ...在浏览器知道具有id的输入的存在之前评估该行lolz.因此,document.getElementById('lolz')将返回null,并document.getElementById('lolz').value应导致错误.
在函数内移动该行,它应该工作.这样,该行只会在调用函数时运行.并使用var其他建议,以避免使其成为一个全局变量:
function kk(){
var lol = document.getElementById('lolz').value;
alert(lol);
}
您还可以将脚本移动到页面末尾.将所有脚本块移动到HTML的末尾<body>是当今的标准做法,以避免这种引用问题.它还倾向于加速页面加载,因为在(大部分)显示HTML之后处理需要很长时间加载和解析的脚本.
<script type="text/javascript">
function kk(){
var lol = document.getElementById('lolz').value;
alert(lol);
}
</script>
<body onload="onload();">
<input type="text" name="enter" class="enter" id="lolz" value=""/>
<input type="button" value="click" onclick="kk();"/>
</body>
用这个