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 相关文章推荐
javascript Discuz代码中的msn聊天小功能
May 25 Javascript
javascript同步Import,同步调用外部js的方法
Jul 08 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
使用js检测浏览器的实现代码
May 14 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
获取url中用&amp;隔开的参数实例(分享)
May 28 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
vuex的module模块用法示例
Nov 12 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
php中cookie的使用方法
2014/03/29 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
javascript 鼠标拖动图标技术
2010/02/07 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
几款好用的python工具库(小结)
2020/10/20 Python
Java里面有没有全局变量?为什么?
2015/02/06 面试题
专科文秘应届生求职信
2013/11/18 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
2014年统计工作总结
2014/11/21 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
小学推普周活动总结
2015/05/07 职场文书
消费者投诉书范文
2015/07/02 职场文书
学术研讨会主持词
2015/07/04 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP