交通信号灯点击按钮功能

Traffic lights onclick button function

本文关键字：按钮功能通信信号灯更新时间：2023-09-26

我目前正在记事本中处理这个问题，但错误不断发生。我的代码有什么问题？我正在尝试使用一个点击按钮来处理带有对象数组的交通灯。

<html>
    <head>
        <body>
            <div style="background:black;width:75px;height:150px;margin:auto;">
                <div id="redlight" style="background:#ff0000;width:40px;height:40px;border-        radius:40px;margin:auto;"></div>
                <div id="yellowlight" style="background:#3F4A00;width:40px;height:40px;border-radius:40px ;margin:auto"></div>
                <div id="greenlight" style="background:#044A00;width:40px;height:40px;border-radius:40px;margin:auto"></div>
                <button onclick="start()" style="width:75px;height:30px;margin:auto">Motion- Start!</button>
            </div>
            <script>
                var redlight = document.GetElementById(redlight);
                var yellowlight = document.GetElementById[yellowlight];
                var greenlight = document.GetElementById[greenlight];
                var colors = ['#ff0000', '#520202', '#ffff00', '#3F4A00', '#008000', '#044A00']
                function start()
                if redlight.style.background == colors[0] {
                    redlight.style.background = colors[1] //switch off red
                    yellowlight.style.background = colors[2] //switch on yellow
                } else if (yellowlight.style.background == "yellow") {
                    yellowlight.style.background = colors[3] //switch off yellow
                    greenliight.style.background = color[4] //switch on green   
                } else
                if (greenlight.style.background == "green") {
                    greenlight.style.background = colors[5] //switch off green
                    redlight.style.background = colors[0] //switch on red
                }
            </script>
    </head>
    </body>

好的。让我们逐行浏览一下：

<html>
    <head>
        <body>

为什么要在<head>标签中放置<body>标签？正确的HTML结构更像这样：

<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

下一个：

<div style="background:black;width:75px;height:150px;margin:auto;">

内联样式难以阅读且难以维护。考虑学习 CSS。

<div id="redlight" style="background:#ff0000;width:40px;height:40px;border-        radius:40px;margin:auto;"></div>
<div id="yellowlight" style="background:#3F4A00;width:40px;height:40px;border-radius:40px ;margin:auto"></div>
<div id="greenlight" style="background:#044A00;width:40px;height:40px;border-radius:40px;margin:auto"></div>
<button onclick="start()" style="width:75px;height:30px;margin:auto">Motion- Start!</button>

再次 - 内联样式。CSS类就是为这种事情而做的。

内联单击处理程序。不是最好的主意，但现在，我们会说没关系。我们有更大的问题要担心！

现在，<script>标记：

var redlight = document.GetElementById(redlight);

JavaScript 区分大小写。你正在寻找getElementById.此外，您正在尝试获取 id 为 redlight 的元素，因此您需要传入一个字符串，而不是变量：getElementById("redlight")

var yellowlight = document.GetElementById[yellowlight];
var greenlight = document.GetElementById[greenlight];

这里的情况类似，但还有一件事：你用括号而不是括号调用函数。

var colors = ['#ff0000', '#520202', '#ffff00', '#3F4A00', '#008000', '#044A00']

行尾缺少分号。

function start()

函数需要用大括号括起来：{}

if redlight.style.background == colors[0] {

如果语句条件需要用括号括起来。

此外，如果您使用的是CSS类，这将容易得多。

    redlight.style.background = colors[1] //switch off red
    yellowlight.style.background = colors[2] //switch on yellow
} else if (yellowlight.style.background == "yellow") {
    yellowlight.style.background = colors[3] //switch off yellow
    greenliight.style.background = color[4] //switch on green   
} else if (greenlight.style.background == "green") {
    greenlight.style.background = colors[5] //switch off green
    redlight.style.background = colors[0] //switch on red
}

其余的：请，请，请使用类。他们会让你的生活更轻松。也使用分号。它们很重要。

只。。。编码时要小心。

这是您的代码的主要修订版（并且正在工作！）：

var redlight = document.getElementById("redlight");
var yellowlight = document.getElementById("yellowlight");
var greenlight = document.getElementById("greenlight");
function start() {
  if (redlight.classList.contains("on")) {
    redlight.classList.remove("on"); //switch off red
    yellowlight.classList.add("on"); //switch on yellow
  } else if (yellowlight.classList.contains("on")) {
    yellowlight.classList.remove("on"); //switch off yellow
    greenlight.classList.add("on"); //switch on green   
  } else if (greenlight.classList.contains("on")) {
    greenlight.classList.remove("on"); //switch off green
    redlight.classList.add("on"); //switch on red
  }
}

.traffic-light {
  background: black;
  width: 75px;
  height: 150px;
  margin: auto;
}
.light {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  margin: auto;
}
.light.red {
  background: #520202;
}
.light.red.on {
  background: #ff0000;
}
.light.yellow {
  background: #3F4A00;
}
.light.yellow.on {
  background: #ffff00;
}
.light.green {
  background: #044A00;
}
.light.green.on {
  background: #008000;
}
button {
  width: 75px;
  height: 30px;
  margin: auto;
}

<div class="traffic-light">
  <div id="redlight" class="light red on"></div>
  <div id="yellowlight" class="light yellow"></div>
  <div id="greenlight" class="light green"></div>
  <button onclick="start()">Motion- Start!</button>
</div>

积极的方面，跟上评论！代码中甚至很少的注释也总比没有好。

您可能需要考虑使用记事本以外的其他方法进行编码 - 即使是原始代码编辑器也应该支持括号匹配。

实际上有很多错误，你去吧我会分解它，但首先

博士

这是工作代码：

<html>
 <body>
  <div style="background:black;width:75px;height:150px;margin:auto;">
   <div id ="redlight" style="background:#ff0000;width:40px;height:40px;border-        radius:40px;margin:auto;"></div>
   <div id = "yellowlight" style="background:#3F4A00;width:40px;height:40px;border-radius:40px    ;margin:auto"></div>
   <div id = "greenlight" style="background:#044A00;width:40px;height:40px;border-radius:40px;margin:auto"></div>
   <button onclick="start()" style="width:75px;height:30px;margin:auto">Motion-    Start!</button>
 </div>
<script>
  var redlight = document.getElementById('redlight');
  var yellowlight = document.getElementById('yellowlight');
  var greenlight = document.getElementById('greenlight');
  var colors = ["rgb(255, 0, 0)",'rgb(82, 2, 2)','rgb(255, 255, 0)','rgb(63, 74, 0)','rgb(0, 128, 0)','rgb(4, 74, 0)'];
  function start() {
    if  (redlight.style.backgroundColor == colors[0])
    {
        redlight.style.backgroundColor = colors[1]; //switch off red
        yellowlight.style.backgroundColor = colors[2]; //switch on yellow
    }
    else if (yellowlight.style.backgroundColor == colors[2]) {
        yellowlight.style.backgroundColor = colors[3]; //switch off yellow
        greenlight.style.backgroundColor = colors[4]; //switch on green
    }
    else if (greenlight.style.backgroundColor == colors[4]) {
        greenlight.style.backgroundColor = colors[5]; //switch off green
        redlight.style.backgroundColor = colors[0]; //switch on red
    }
 }
 </script>
</body>

首先，GetElementById不起作用，你必须这样写getElementById

其次，您需要在函数周围使用大括号（{} start

第三，whatch out，style.background返回rgb中的颜色。因此，我更改了颜色数组中的值以将它们放入 rgb。

第四，注意你的变量名称，你在其中犯了很多错误。greenlight被命名为greenliight一次。此外，您colors一次命名color数组。

比较我的代码和您的代码并进行修复。祝你今天开心

您是否尝试在括号之间定义函数？

function start()
{
if  (redlight.style.background==colors[0])
{
    redlight.style.background= colors[1]//switch off red
    yellowlight.style.background=colors[2]//switch on yellow
} else if (yellowlight.style.background=="yellow") {
    yellowlight.style.background=colors[3]//switch off yellow
    greenlight.style.background=color[4]//switch on green  
} else if (greenlight.style.background=="green") {
    greenlight.style.background= colors[5]//switch off green
    redlight.style.background=colors[0]//switch on red
} 
}

另外，请注意大写字母。语法例如：

document.getElementById("id").style.background = "red";

最后，你写的是"绿灯"而不是"绿灯"。

调用 GetElementById 时，请确保使用括号而不是方括号。此外，"G"应该是小写的，并且您需要在元素名称两边加上引号。这三行应如下所示：

document.getElementById("redlight");

var redlight = document.getElementById("redlight");
var yellowlight = document.getElementById("yellowlight");
var greenlight = document.getElementById("greenlight");
function start() {
  if (redlight.classList.contains("on")) {
    redlight.classList.remove("on"); //switch off red
    yellowlight.classList.add("on"); //switch on yellow
  } else if (yellowlight.classList.contains("on")) {
    yellowlight.classList.remove("on"); //switch off yellow
    greenlight.classList.add("on"); //switch on green   
  } else if (greenlight.classList.contains("on")) {
    greenlight.classList.remove("on"); //switch off green
    redlight.classList.add("on"); //switch on red
  }
}

.traffic-light {
  background: black;
  width: 75px;
  height: 150px;
  margin: auto;
}
.light {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  margin: auto;
}
.light.red {
  background: #520202;
}
.light.red.on {
  background: #ff0000;
}
.light.yellow {
  background: #3F4A00;
}
.light.yellow.on {
  background: #ffff00;
}
.light.green {
  background: #044A00;
}
.light.green.on {
  background: #008000;
}
button {
  width: 75px;
  height: 30px;
  margin: auto;
}

<div class="traffic-light">
  <div id="redlight" class="light red on"></div>
  <div id="yellowlight" class="light yellow"></div>
  <div id="greenlight" class="light green"></div>
  <button onclick="start()">Motion- Start!</button>
</div>