数组/HTML中的函数

Functions in arrays/HTML

本文关键字：函数 HTML 数组      更新时间：2024-06-16

我正在创建一个练习程序，其中一个按钮在红绿灯中的不同图片之间切换颜色。但是，当我点击按钮时，什么也没发生。

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css">
        <script src="jscript.js"></script>
        <title>Task 3</title>
    </head>
    <body>
        <table align="center" style="border:groove;">
            <tr>
                <td> 
                     <button id="btn" onclick="switch()">Switch!</button>
                </td>
            </tr>
            <tr>
                <td> <img src="black-circle.png" class="circles" id="c1"> </td>
            </tr>   
            <tr> 
                <td> <img src="black-circle.png" class="circles" id="c2"> </td>
            </tr>
            <tr>
                <td> <img src="black-circle.png" class="circles" id="c3"> </td>
            </tr>
        </table>
    </body>
</html>

CSS：（非常简单）

@charset "utf-8";
/* CSS Document */
.circles {
    width:53px;
    height:54px;
}   
#c1 {
}
#c2 {

}
#c3 {

}
#btn {

}

JavaScript:

var funcSelect = [displayRed(), displayYellow(), displayGreen()];
var funcSelectOperator = 0;
function switch() {
    ++funcSelectOperator;
    if (funcSelect == 3) {
        funcSelectOperator = 0;
    }
    funcSelect[funcSelectOperator];
    }
function displayRed() {
    document.getElementById("c1").src = "red-circle.png";
    document.getElementById("c2").src = "black-circle.png";
    document.getElementById("c3").src = "black-circle.png";
}
function displayYellow() {
    document.getElementById("c1").src = "black-circle.png";
    document.getElementById("c2").src = "yellow-circle.png";
    document.getElementById("c3").src = "black-circle.png";
}
function displayGreen() {
    document.getElementById("c1").src = "black-circle.png";
    document.getElementById("c2").src = "black-circle.png";
    document.getElementById("c3").src = "green-circle.png";
}
// JavaScript Document

这是因为您的switch函数，您混合了变量角色，而不执行该函数。另外，从函数数组中删除执行。

var funcSelect = [displayRed, displayYellow, displayGreen];
var funcSelectOperator = 0;
function switchColor() {
    if(funcSelectOperator == 2)
        funcSelectOperator= 0;
    else ++funcSelectOperator;
    funcSelect[funcSelectOperator]();
}
相关文章：