getElementById 用法的一个技巧

来源：互联网发布：刷计步器步数有软件么编辑：程序博客网时间：2024/05/16 11:33

假设实现把 TextBox1 的字符实时的拷贝到 TextBox2 中，代码如下：

    <Script language="Javascript">
        function CopyStr()
        {
          document.getElementById("TextBox2").value = document.getElementById("TextBox1").value;
        }
     </Script>

    <form name="form1" method="post" action="Default.aspx" id="form1">
     <input name="TextBox1" type="text" id="TextBox1" OnKeyup="CopyStr()" /><br />
     <input name="TextBox2" type="text" id="TextBox2" />
    </form>

以上代码能够很好的工作。但是，我嫌等号2边的 document.getElementById("...")的代码太长，想在使用前把它们先分别赋给2个变量，再使用它们。这样还有一个好处，就是当 document.getElementById("...") 在多条语句中使用的时候，节约代码量是很可观的。再者，如果document.getElementById("...")，要修改，只修改前边的一条语句就可以了。于是改写为：

            var oBox1 = document.getElementById("TextBox1");
            var oBox2 = document.getElementById("TextBox2");
            oBox2.value = oBox1.value;

但是奇怪的是，程序执行后没有达到预期的结果。

原来，oBox2 本身是一个对象引用类型，要给它的属性赋值，必须先初始化它，然后才能使用。改成以下代码就可以了：

            var oBox1 = document.getElementById("TextBox1");
            var oBox2 = new Object(); //声明对象变量
            oBox2 = document.getElementById("TextBox2");
            oBox2.value = oBox1.value;

0 0