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 Keycode对照表
Oct 24 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
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自定义函数实现二维数组排序功能
2016/07/20 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
jquery选择器简述
2015/08/31 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
详解小程序云开发数据库
2019/05/20 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
JS实现省市县三级下拉联动
2020/04/10 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
在Docker上开始部署Python应用的教程
2015/04/17 Python
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
工厂总经理岗位职责
2014/02/07 职场文书
青春奉献演讲稿
2014/05/08 职场文书
货物运输服务质量承诺书
2014/05/29 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
离婚协议书的范本
2015/01/27 职场文书
售房协议书范本
2015/08/11 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python
在redisCluster中模糊获取key方式
2021/07/09 Redis
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs