javascript - webpack怎么使用页面按钮的点击事件?

查看:364
本文介绍了javascript - webpack怎么使用页面按钮的点击事件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

本人最近刚开始学习webpack,网上的入门教程也做了很多个,但是都比较简单(再页面上显示一行字),自己就想要练习的全面一些,页面上有一些元素(DIV INPUT BUTTON),下面是HTML代码BODY部分:

<body>
        <div id="test"></div>
        <input id="text1" />
        <button onclick="add()">填充</button>
        <button onclick="changeBg()">换背景色</button>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
        <script type="text/javascript" src="js/bundle.js" ></script>
    </body>

下面是module.js

var a;
a=10;
for(var i=0;i<a;i++){
    $("#test").append("<span>"+i+"</span>");
}
function add(){
    $("#text1").val(i);
    i++;
}
function changeBg(){
    $("body").css("background","beige");
}

打包生成bundle.js后运行页面,第一个for循环再div中插入span没问题,然后点击填充按钮,这时控制台报错:
Uncaught ReferenceError: add is not defined
下面那个换背景色的点击事件也是报错,这是什么原因啊?应该怎么做?
对了,下面贴entry.js入口代码:

require("./css/style.css")
document.write("开始工作咯")
require('./js/module.js')

求指导~~

解决方案

add打包之后就不在全局中了,所以要么用@hexs 的方法,要么把 module.js 写成模块形式,用 export或者module.export导出方法

这篇关于javascript - webpack怎么使用页面按钮的点击事件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆