创新实训——html中的内部js方法调用失效问题

js中的事件绑定主要有三种方式：

① 行内绑定

② 动态绑定

③ 事件监听

今天在写系统注册页面时，出现了这样一个奇葩的问题：

我用第一种行内绑定的方式来实现一个选择框（选择不同的option会产生不同的操作来修改html界面），本来是非常顺利的，但在我修改了一些class和css样式之后，这种行内绑定的方式竟然莫名其妙的失效了：

html:

script:

如上图这种行内绑定的方式突然失效，但之后我将sChange（）方法由html内部移到外部css文件中后，sChange（）方法竟然再次生效：

.css：

然后，我又尝试了另一种事件绑定方式：动态绑定，结果内部调用和外部调用均可以实现

.css:

理想效果：

虽然经过js的修改可以解决问题，实现上图的效果，但我想弄明白其中的原因，所以总昨天晚上百度了一晚，看过了无数案例和解决方案，但仍然没有遇到过跟我一样的案例，今天又调试了一上午代码还是没有找到原因，所以希望有类似经历的小伙伴和知道原因的dalao能够伸出援手（救急），而我还会继续寻找原因，找到后会第一时间更新。