document.getElementById获取不到值的原因

 HTML DOM 定义了多种查找元素的方法,除了 getElementById() 之外,还有 getElementsByName() 和 getElementsByTagName()。

不过,如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。

在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。

需求,就可以想到利用GET传值的方式,但常规GET方式需要把链接写入标签的a href里面,而我们实际上是希望用按钮来进行点击,而不是一个简单的超链接形式。于是这里就得用到Javascript在按钮的onclick事件下写代码。很明白,就是将input的value(用户输入的页码)传到onclick的代码里,这里用javascript的location来完成跳转。

    好了,整体就是这个样子,至于getElementById这个方法我就不多说了。重点说说我遇到的问题以及如何解决的。

1.Javascript本身不会报错,只要不出你预期的结果,那么代码肯定是有问题的。这个时候可以看看代码里的符号,比如说单引号、双引号、大括号、小括号等等...因为这段代码不是直接在JS文件中写的,而是用PHP进行构造来输出的,再加上PHP本身输出需要用到单引号、双引号,所以这个时候很多符号混合在一起是很容易出错。不要紧,你可以先运行一下,然后再查看网页源代码来看看当前的Javascript到底是不是你需要的那一段,看到少了什么符号我们就立马给补上,不过这个时候还需要注意一点,如果要直接输出单引号、双引号的话,在PHP的代码里这里需要用‘’来进行转义。

2.上面的问题一般是不会弹出任何结果的,即使我们用alert来查看设置的变量,因为Javascript代码存在问题,它根本就没办法执行!假设你已经改正了语法上的错误,那么我们继续看...我们可以用以下代码来获取用户输入的页码,并打印输出看看正确与否。

 

 代码如下 复制代码
var uPage=document.getElementById('pa').value; alert(uPage);

 如果这个时候一直弹出"undefined"的提示,那么至少说明你的Javascript代码正确运行了,它没有语法上的错误!至于为什么undefined,我调试了很久都没找出原因,后来无意中尝试把value改成innerHTML,居然打印出了一些结果,不过仔细一看才知道打印出的是一个同id名的div中的内容,这下才恍然大悟...在分页类中直接给input标签的id取名为page了,而这个page我在其他的div中也使用了。于是将分页类中input的id改为一个很变态的名字。其实这个时候就应该注意到这些问题,如果我们的代码可能会提供给其他人使用,那么命名就很重要了,如果只是在内部(就比如说我这里input这个标签只在类里面使用),那么名字应该尽量取得复杂一些,这样它与用户的命名发生冲突的可能性就很小了。

     最后:

 代码如下 复制代码
document.getElementById('idname').value;//获取input标签里的值,value; document.getElementById('idname').innerHTML;//获取div里的html内容  

参考资料:

1. document . getElementById 的用法和 DHTML.CHM 的下载地址

今天在网络上查找 document . getElementById 的用法,如下:

A :      语法:

     oElement = document . getElementById ( sID )

      参数:

     sID   : 必选项。字符串 (String) 。

      返回值:

     oElement   : 对象 (Element) 。

      说明:

      根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象       ,则返回该组对象中的第一个。

      如果无符合条件的对象,则返回 null 。

 

B :有一个例子可以很好的说明:

 

   ****************************************************************************

   *                                                                           *

   *   这个函数中最关键的地方是 document.getElementById ,他是什么呢?        *

   *                                                                           *

   *   关于 document.getElementById ,是这样的:                              *

   *                                                                     *

   *   如: document.getElementById('hdrPageHeader_lblTitle')               *

   *                                                                     *

   *   表示的意思是:获取 ID 为 :hdrPageHeader_lblTitle 的对象                  *

   *                                                                           *

   * <a >aa</a>                              *

   * <a >bb</a>                               *

   * <a >cc</a>                              *

   * <script language="javascript">                                      *

   * <!--                                                                *

   * var idtext=document.getElementById('hdrPageHeader_lblTitle')        *

   * alert(idtext.innerText)                                             *

   * //-->                                                               *

   * </script>                                                           *

 

 

C :另外还得到一个细节:

① document.getElementById 有时会抓 name 放过了 id ,据说是 IE 的一个 BUG ;

页面中有

     <input type="hidden" value="2" />

          <select     >

一个是 一个是

用 document.getElementById 取第二个,可是,取到的却是第一个 >

在 IE 中 getElementById 竟然不是先抓 id 而是先找 name 相同的物件 ...

??? form, 每?? form 有??? textbox, ??? form 中的 textbox 是相同的 name, 但 id 都不同 ...

??釉 Firefox 是?]???的 ... 但在 IE ?s只抓得到第一??出?的 name ?料

时间: 2024-08-01 04:49:21

document.getElementById获取不到值的原因的相关文章

window opener-window.opener.document.getElementById()获取不到值

问题描述 window.opener.document.getElementById()获取不到值 同样的XP系统IE8浏览器,为什么有的机子上使用在子页面window.opener.document.getElementById()后父页面没有显示传过来的值,江湖救急,这个弄不好要加班啊,大部分机子都是没问题的,是不是IE要设置什么?

Yii CFileCache 获取不到值的原因分析

我在配置文件里面配置了 'cache'=>array( 'class'=>'system.caching.CFileCache', ), 在控制器里面设置了 return array( array( 'COutputCache+pro', 'duration'=>86400, 'varyByParam'=>array('id'), ), 然后开启了数据库 'schemaCachingDuration'=>3600, 初次使用是有缓存文件的 而且发现 确实加快不少访问速度 但时

document.getElementById获取控件对象为空的解决方法_基础知识

1.下面是一个简单的例子,页面加载时显示一段信息 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>      <

javascript:使用document.getElementById读取数据为空分析

今天写个网页,想在页面加载onLoad时,动态显示由后台其他程序传来的数据时,用document.getElementById获取控件对象总是为空.但是检查了这个id确实是存在的.在网上查阅一番后才知道了其中的原因. 1.下面是一个简单的例子,页面加载时显示一段信息 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTM

TypeError document.getElementById(...) is null错误原因

  这篇文章主要介绍了TypeError document.getElementById(...) is null错误原因,这是很容易犯的一个低级错误,需要的朋友可以参考下 今天手写了一个简单的页面做测试用,写完js部分总是报 TypeError document.getElementById(...) is null 这个错误,代码看了几遍,语法上没找着什么错误,没办法,就在互联网上搜索了一下,才发现 document.getElementById 这个根据id找节点的语法写法还是有点讲究的,

document.getElementById的简写方式(获取id对象的简略写法)_基础知识

比如用_$(id)代替document.getElementById(id). 如果是纯粹的代替可以使用下面的代码 复制代码 代码如下: function $(id){document.getElementById(id)} 个人比较推荐用prototype中对document.getElementById的定义: 复制代码 代码如下: function $() { var elements = new Array(); for (var i = 0; i < arguments.length;

TypeError document.getElementById(...) is null错误原因_javascript技巧

今天手写了一个简单的页面做测试用,写完js部分总是报 TypeError document.getElementById(...) is null 这个错误,代码看了几遍,语法上没找着什么错误,没办法,就在互联网上搜索了一下,才发现 document.getElementById 这个根据id找节点的语法写法还是有点讲究的,具体如下: (1)如果写在 id 所在节点的前面,比如 head 块中,则要如下写法: 复制代码 代码如下: window.onload=function(){  .....

JS使用getComputedStyle()方法获取CSS属性值_javascript技巧

在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性中的值(style="-"),而无法获取定义在<style type="text/css">里面的属性. 复制代码 代码如下: <span style="font-family:Arial;font-size:14px;">

var-在使用jQuery时,应该如何花获取元素的值呢

问题描述 在使用jQuery时,应该如何花获取元素的值呢 比如下面的代码 <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l