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兼容性测试实例
Jul 01 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
javascript中json基础知识详解
Jan 19 Javascript
原生JS+Canvas实现五子棋游戏
May 28 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
做一个有下拉功能的留言版
2006/10/09 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
JS实现购物车特效
2017/02/02 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
python遍历数组的方法小结
2015/04/30 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
python字典key不能是可以是啥类型
2020/08/04 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
安全生产年活动总结
2014/08/29 职场文书
道歉短信大全
2015/05/12 职场文书
培训计划通知
2015/07/15 职场文书
Python实现滑雪小游戏
2021/09/25 Python