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 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
基于jquery的图片懒加载js
Jun 30 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 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
德生PL330测评
2021/03/02 无线电
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
Python Web框架Tornado运行和部署
2020/10/19 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
Python实现统计代码行的方法分析
2017/07/12 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
python3中rank函数的用法
2019/11/27 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
成功的餐厅经营创业计划书
2014/01/15 职场文书
办公室主任职责范本
2014/03/07 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
免职通知
2015/04/23 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
python 单机五子棋对战游戏
2022/04/28 Python