javascript - 红绿灯onclick按钮函数-6ren

javascript - 红绿灯onclick按钮函数

转载作者：行者123 更新时间：2023-11-28 05:23:20

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

<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>

你为什么要放一个 <body>在你的 <head> 中标记标签？正确的 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] {

If语句条件需要加括号。

此外，如果您使用 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>

积极的一面，请跟上评论!代码中的注释即使很少也比没有好。

您可能需要考虑使用记事本以外的东西来编写代码——即使是原始代码编辑器也应该支持括号匹配。

关于javascript - 红绿灯onclick按钮函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35662551/