05_input.html

<!DOCTYPE html>
<hmtl lang="en">
    <head>
        <meta charset="UTF-8">
        <title>DOM practice</title>
        <style>
            button {
                width: 300px;
                height: 50px;
                margin-bottom: 20px;
                font-size: 24px;
            }

            input {
                width: 300px;
                height: 50px;
                font-family: Arial;
                font-size: 18px;
            }
        </style>
    </head>
    <body>
        <div>
            <button>This is button</button>
        </div>

        <div>
            <input type="text" value="please type here">
        </div>


        <script>
            // 1. 获取元素
            var btn = document.querySelector('button');
            var input = document.querySelector('input');

            // 2. 注册事件
            // 3. 处理程序
            btn.onclick = function() {
                input.value = "got clicked on";    
                //如果想让某个表单被禁用 不能再点击 --> disabled 
                this.disabled = true; 

                //this 指向的是事件函数的调用者 btn 
            }


        </script>
    </body>
</hmtl>