document.getElementById获取控件对象为空的解决方法


Posted in Javascript onNovember 20, 2013

1.下面是一个简单的例子,页面加载时显示一段信息

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <script language="javascript">
          alert("hello!!!");
      </script>
  </head>  <body onLoad="showMessage()">
      <h1>在页面加载之前,会输出一些信息</h1>
  </body>
</html>

执行后,确实是“在页面加载前,输出了信息”。
2.下面的例子会出现document.getElementById为空的情况。
我的计划是:在页面加载时,在<body></body>的文本框中显示由后台处理来的数据,比如这里的字符串“hello, my friend!”。但是这里通过通过document.getElementById读取的是对象为空。
因为onLoad方法在页面<body></body>加载之前执行,此时id="mes"对应文本框的文本框,还没有加载进去。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <script language="javascript">
          var t=document.getElementById("mes");
          t.value="hello, my friend!"
      </script>
  </head>  <body onLoad="showMessage()">
      the message is:<input type="text" id="mes">
  </body>
</html>

3.解决办法
在加载Html网页时,会加载<html></html>中的所以数据。先加载<head>,再加载<body>。
所以我们可在</body>之后,在</html>之前写入javascript就好了。程序顺序执行,执行到相应的javascript调用就可以执行。不是用onLoad方法。
代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <body> 
          the message is:<input type="text" id="mes">
    </body>      <!-- 继续执行javascript代码 -->
    <script language="javascript">
          function showMessage()
          {
              var t=document.getElementById("mes");
              t.value="hello, my friend!"
          }
          showMessage();    //调用方法,更新文本框
      </script>
</html>
Javascript 相关文章推荐
可以文本显示的公告栏的js代码
Mar 11 Javascript
jquery.validate使用攻略 第一部
Jul 01 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 Javascript
JavaScript正则表达式实例详解
Oct 16 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
JavaScript 反射学习技巧
Oct 16 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 #Javascript
js数组转json并在后台对其解析具体实现
Nov 20 #Javascript
javascript 循环调用示例介绍
Nov 20 #Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 #Javascript
JavaScript实现多维数组的方法
Nov 20 #Javascript
jQuery jcrop插件截图使用方法
Nov 20 #Javascript
javascript中的if语句使用介绍
Nov 20 #Javascript
You might like
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
PHP Document 代码注释规范
2009/04/13 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
禁止js文件缓存的代码
2010/04/09 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
Python的多态性实例分析
2015/07/07 Python
用Python实现随机森林算法的示例
2017/08/24 Python
python交互界面的退出方法
2019/02/16 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
Android面试题及答案
2015/09/04 面试题
通信专业个人自我鉴定
2013/10/21 职场文书
中医药大学毕业生自荐信
2013/11/08 职场文书
毕业生的自我评价
2013/12/30 职场文书
2014植树节活动总结
2014/03/11 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python
python自动化八大定位元素讲解
2021/07/09 Python
mysql中关键词exists的用法实例详解
2022/06/10 MySQL