HTML按钮无法与我的JavaScript一起使用

我正在创建一个按钮操作的交通信号灯集,我有这个HTML和JAVASCRIPT

var lightStates = {
  red: 0,
  amber: 1,
  green: 2
};
var currentState = lightStates.red;

document.getElementById('changeBtn').onclick = function() {
  changeState();
};


function changeState() {
  clear();
  switch (currentState) {
    case lightStates.red:
      {
        document.getElementById("red").className = "light red";
        currentState = lightStates.amber;
      }
      break;
    case lightStates.amber:
      {
        document.getElementById("amber").className = "light amber";
        currentState = lightStates.green;
      }
      break;
    case lightStates.green:
      {
        document.getElementById("green").className = "light green";
        currentState = lightStates.red;
      }
      break;
  }
}

function clear() {
  document.getElementById("red").className = "light off";
  document.getElementById("amber").className = "light off";
  document.getElementById("green").className = "light off";
}
<html>

<head>
  <script type="text/javascript" src=javasript.js></script>
</head>
<link rel="stylesheet" href="style.css">
<div class="traffic-light">
  <div class="light off" id="red"></div>
  <div class="light off" id="amber"></div>
  <div class="light off" id="green"></div>
</div>
<button id="changeBtn">Change</button>
<input type="button" id="changeBtn" onclick="changestate" </input>

</html>

以及css工作表上的指示灯,我遇到的问题是,当我在浏览器中运行代码时,该按钮根本无法执行任何操作,这是怎么回事?

大卫
  1. 您试图以两种单独的方式调用函数,即内联和作为事件处理程序。
  2. 标记无效,既有错别字,也有多个相同的id值。
  3. 事件处理程序是在元素实际存在之前分配的。

删除重复的按钮和内联,onclick在元素之后添加JavaScript

<input type="button" id="changeBtn"></input>
<script type="text/javascript" src="javasript.js"></script>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Web开发人员的JavaScript代码无法与我的html网站一起使用

来自分类Dev

Javascript / jQuery无法与我的html和CSS一起使用?

来自分类Dev

serialize()无法与我的表单一起使用

来自分类Dev

无法使SaveFileDialog与我的网页一起使用

来自分类Dev

ImageIcon无法与我一起使用

来自分类Dev

$ rootScope在AngularJs中无法与我一起使用

来自分类Dev

无法使HTML5音频与我的MP3一起使用

来自分类Dev

无法使 highlight.js 与我的 Javascript 功能一起使用

来自分类Dev

无法将我的Javascript与HTML一起使用

来自分类Dev

使用:after或:: after的Clearfix无法与我的彩色框一起使用

来自分类Dev

需要更改HTML结构,以便它可以与我正在使用的脚本一起使用

来自分类Dev

无法让 VSCode 调试与我的 NodeJs 应用程序一起使用

来自分类Dev

为什么join(“,”)无法与我的数组一起使用?

来自分类Dev

Shell选项“ OPTIONNAME”无法与我的脚本一起正常使用

来自分类Dev

无法使BOOST_FOREACH与我的自定义类一起使用

来自分类Dev

无法获得与我的图像一起使用的透视图

来自分类Dev

.stop()无法与我的悬停一起使用,以使快速移动工作-jQuery

来自分类Dev

Oracle REGEXP_SUBSTR无法与我的模式一起使用

来自分类Dev

多媒体密钥无法与我的HP Probook 4540s一起使用

来自分类Dev

Paypal CreateBillingAgreement API调用无法与我的api凭据一起使用

来自分类Dev

JNativeHook键盘侦听器无法与我的Swing / GUI一起使用

来自分类Dev

为什么setMargins无法与我的RelativeLayout一起使用?

来自分类Dev

CardView Recycler无法与我的List <SomeModel>一起使用

来自分类Dev

无法读取文件并将其与我的代码一起使用

来自分类Dev

RSA密钥仅与我的用户一起使用

来自分类Dev

Wi-Fi无法与我的路由器一起使用,但可以与其他接入点一起使用

来自分类Dev

我的JavaScript无法与Chrome一起使用

来自分类Dev

Spring Boot-为什么@ComponentScan无法与我的软件包组合一起使用?

来自分类Dev

Yii Framework 1.1 .. CGridview过滤器无法与我自己的搜索功能一起使用到模型中

Related 相关文章

  1. 1

    Web开发人员的JavaScript代码无法与我的html网站一起使用

  2. 2

    Javascript / jQuery无法与我的html和CSS一起使用?

  3. 3

    serialize()无法与我的表单一起使用

  4. 4

    无法使SaveFileDialog与我的网页一起使用

  5. 5

    ImageIcon无法与我一起使用

  6. 6

    $ rootScope在AngularJs中无法与我一起使用

  7. 7

    无法使HTML5音频与我的MP3一起使用

  8. 8

    无法使 highlight.js 与我的 Javascript 功能一起使用

  9. 9

    无法将我的Javascript与HTML一起使用

  10. 10

    使用:after或:: after的Clearfix无法与我的彩色框一起使用

  11. 11

    需要更改HTML结构,以便它可以与我正在使用的脚本一起使用

  12. 12

    无法让 VSCode 调试与我的 NodeJs 应用程序一起使用

  13. 13

    为什么join(“,”)无法与我的数组一起使用?

  14. 14

    Shell选项“ OPTIONNAME”无法与我的脚本一起正常使用

  15. 15

    无法使BOOST_FOREACH与我的自定义类一起使用

  16. 16

    无法获得与我的图像一起使用的透视图

  17. 17

    .stop()无法与我的悬停一起使用,以使快速移动工作-jQuery

  18. 18

    Oracle REGEXP_SUBSTR无法与我的模式一起使用

  19. 19

    多媒体密钥无法与我的HP Probook 4540s一起使用

  20. 20

    Paypal CreateBillingAgreement API调用无法与我的api凭据一起使用

  21. 21

    JNativeHook键盘侦听器无法与我的Swing / GUI一起使用

  22. 22

    为什么setMargins无法与我的RelativeLayout一起使用?

  23. 23

    CardView Recycler无法与我的List <SomeModel>一起使用

  24. 24

    无法读取文件并将其与我的代码一起使用

  25. 25

    RSA密钥仅与我的用户一起使用

  26. 26

    Wi-Fi无法与我的路由器一起使用,但可以与其他接入点一起使用

  27. 27

    我的JavaScript无法与Chrome一起使用

  28. 28

    Spring Boot-为什么@ComponentScan无法与我的软件包组合一起使用?

  29. 29

    Yii Framework 1.1 .. CGridview过滤器无法与我自己的搜索功能一起使用到模型中

热门标签

归档