一个段简单的js代码,一直提示变量没有定义

mc12345
  • 16

想做一个点击按钮后,一段文字出现在屏幕上,刚刚开始学js,
console里一直提示 pickme is not defined。

    <html>
    
    <head>
        <title>测试</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <script type="text/javascript">
         window.onload = function() {
            function pickme() {
                var pickup = document.getElementById('pickup');
                var textbox =document.getElementById('textbox');
                textbox.innerHTML="你点击了按钮";
            }
        }
        </script>
    </head>
    <body>
        <div style="background-color: #dddddd;height:400px;">
        </div>
        <div id="textbox" style="height: 200px;">
            <button id="pickup" onclick="pickme()" type="button" style="margin: 15px;width: 100px;height:50px;">按钮</button>
        </div>
    </body>
    
    </html>
回复
阅读 2.6k
5 个回答

原因如楼上所说。
若担心文档未加载完,用户触发事件,可以这样:

<script type="text/javascript">
window.onload = function() {
    function pickme() {
        var pickup = document.getElementById('pickup');
        var textbox =document.getElementById('textbox');
        textbox.innerHTML="你点击了按钮";
    }
    document.getElementById('pickup').addEventListener('click',pickme)
}
</script>

另为避免脚本影响文档渲染,不是必须放在前面的,建议放到文档后面,即 </body> 之前。

你的pickme函数定义在了window.onload函数内部,所以button的onclick是拿不到的,改成全局的就可以了

<script type="text/javascript">
         function pickme() {
                var pickup = document.getElementById('pickup');
                var textbox =document.getElementById('textbox');
                textbox.innerHTML="你点击了按钮";
            }
</script>

把window.onload 去掉就可以了

对于楼主的问题,去掉window.onload即可,
因为这个pickup方法定义的作用域不是全局的,是访问不到了。

script放在head中需要用window.onload来实现最后的加载,而如果放在</body>之前,则不需加了

宣传栏