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 相关文章推荐
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
JS中的多态实例详解
Oct 15 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
js加减乘除精确运算方法实例代码
Jan 17 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 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实现WEB动态网页静态
2006/10/09 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
node.js的事件机制
2017/02/08 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
Python守护进程实现过程详解
2020/02/10 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
Python基于Faker假数据构造库
2020/11/30 Python
会计应聘求职信范文
2013/12/17 职场文书
电子商务应届生自我鉴定
2014/01/13 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
程序员求职信
2014/04/16 职场文书
庆元旦活动总结
2014/07/09 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
行政上诉状范文
2015/05/23 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
情感电台广播稿
2015/08/18 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
Python常遇到的错误和异常
2021/11/02 Python