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 相关文章推荐
自制基于jQuery的智能提示插件一枚
Feb 18 Javascript
jquery购物车实时结算特效实现思路
Sep 23 Javascript
YUI模块开发原理详解
Nov 18 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
javascript操作表格排序实例分析
May 06 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 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
GD输出汉字的函数的分析
2006/10/09 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python操作redis的方法
2015/07/07 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
python机器学习之决策树分类详解
2017/12/20 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
Python Lambda函数使用总结详解
2019/12/11 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
武汉瑞得软件笔试题
2015/10/27 面试题
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
银行实习鉴定
2013/12/13 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
工程主管竞聘书
2015/09/15 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书