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 timers计时器简单应用说明
Oct 28 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
Vue微信公众号网页分享的示例代码
May 28 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
详解JVM系列之内存模型
Jun 10 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
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
[06:04]DOTA2英雄梦之声Vol19卓尔游侠
2014/06/20 DOTA
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
python字符串编码识别模块chardet简单应用
2015/06/15 Python
python基础教程之匿名函数lambda
2017/01/17 Python
Python管理Windows服务小脚本
2018/03/12 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
远程调用的原理
2014/07/05 面试题
酒后驾驶检讨书
2014/01/27 职场文书
通信研究生自荐信
2014/02/01 职场文书
环保建议书200字
2014/05/14 职场文书
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript