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 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
了解jQuery技巧来提高你的代码
Jan 08 Javascript
javascript 词法作用域和闭包分析说明
Aug 12 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
javascript框架设计之类工厂
Jun 23 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
巧用weui.topTips验证数据的实例
Apr 17 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 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
晶体管来复再生式二管收音机
2021/03/02 无线电
php合并数组中相同元素的方法
2014/11/13 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
jquery 学习之二 属性相关
2010/11/23 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
Python常见文件操作的函数示例代码
2011/11/15 Python
python原始套接字编程示例分享
2014/02/21 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
Django中的文件的上传的几种方式
2018/07/23 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
Python下载的11种姿势(小结)
2020/11/18 Python
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
毕业生自荐书模版
2014/01/04 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
毕业设计工作总结
2015/08/14 职场文书