在HTML中引用JavaScript中的变量

和上次的代码几乎一样，但这次是引用已经写好的变量。主要功能和用法如下：

document对象的getElementId方法得到HTML元素。
HTML元素的value属性可以用来设置变量的值。

02.html
<!DOCTYPE html>
<html>
<head>
    <title>在HTML中引用JavaScript的变量</title>
    <script type="text/javascript">
    var foobar = \'foobar\';//创建一个全局变量“foobar”
    function var2pass() {
        document.getElementById(\'textfield\').value = foobar;//给HTML元素的value属性赋值

        alert(\'应用变量成功！\');
    }
    function displayVar() {
        alert(\'变量值为\' + foobar);
    }
    </script>
</head>
<body>
    <h2>
    在HTML中引用JavaScript的变量
    </h2>
    <hr>
    <br>
    <h5>单机相应的按钮……</h5>
    <form name="form1" method="post" action="">
    <label>
    <input type="text" name="textfield" id="textfield">
    </label>
    <!-- 绑定onclick事件 -->
    <label>
    <input type="button" name="button" id="button" value="显示变量" onclick="javascript: void displayVar();">
    </label>
    <!-- 绑定onclick事件 -->
    <label>
    <input type="button" name="button2" id="button2" value="引用变量" onclick="javascript: void var2pass();">
    </label>
    </form>
</body>
</html>