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面向对象之四 继承
Feb 08 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
angular实现form验证实例代码
Jan 17 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
vue实现微信分享功能
Nov 28 Javascript
js+html实现点名系统功能
Nov 05 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 无限分类的树类代码
2009/12/03 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
php常用图片处理类
2016/03/16 PHP
js常用函数 不错
2006/09/08 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
js断点调试经验分享
2017/12/08 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
python自动化报告的输出用例详解
2018/05/30 Python
详解Python学习之安装pandas
2019/04/16 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
python无序链表删除重复项的方法
2020/01/17 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
AJAX都有哪些有点和缺点
2012/11/03 面试题
Ruby如何进行文件操作
2014/07/17 面试题
超市客服工作职责
2014/06/11 职场文书
档案工作汇报材料
2014/08/21 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
英语辞职信怎么写
2015/02/28 职场文书
售房协议书范本
2015/08/11 职场文书
python开发飞机大战游戏
2021/07/15 Python