在HTML中引用JavaScript中的變量

時間 2019-11-30

原文原文鏈接

和上次的代碼幾乎同樣，但此次是引用已經寫好的變量。主要功能和用法以下：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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。