onClick调色板

Question

我正在尝试制作一个彩色托盘，以便我按下颜色，然后按下表格中的空白区域，空间将变为我选择的颜色。这是通过使用图像。 我是JavaScript新手，所以我很难理解onClick是如何工作的，以及我的函数是否正在做它们应该做的事情。

function GetColour(){
    colBlue = document.getElementById("Blue");
    colRed = document.getElementById("Red");
    colYellow = document.getElementById("Yellow");
    colGreen = document.getElementById("Green");
    colOrange = document.getElementById("Orange");
    colBlack = document.getElementById("Black");
    colWhite = document.getElementById("White");
    colBrown = document.getElementById("Brown");
}

function CellClicked(cell){
    document.getElementById("board").setAttribute(GetColour(), id)
}

这是我的颜色托盘（它们被设置为两个表格进行布局，所以我只为这篇文章展示一个。这不在脚本标签中。

<div id="board" onlClick="GetColour()">
<table>
        <tr height=30>
            <td id=Blue><img type='button' src='Blue.gif' onclick='GetColour()'></td>
            <td id=Red><img type='button' src='Red.gif' onclick='GetColour()'></td>
            <td id=Yellow><img type='button' src='Yellow.gif' onclick='GetColour()'></td>
            <td id=Green><img type='button' src='Green.gif' onclick='GetColour()'></td>
        </tr>

这是我的4行'空格'来放置这些颜色。

<TR>
    <TD>
        <IMG src="transparent.gif" alt="empty hole" onclick="CellClicked(1)">
        <IMG src="transparent.gif" alt="empty hole" onclick="CellClicked(2)">
        <IMG src="transparent.gif" alt="empty hole" onclick="CellClicked(3)">
        <IMG src="transparent.gif" alt="empty hole" onclick="CellClicked(4)">
    </TD>

我希望我以一种可以理解的方式提出这个问题，当我使用Chrome的控制台时，点击一个颜色什么也没有显示（假设并希望它有效。但是然后按下一个空白区域来放置颜色我得到一个错误说“未捕获的ReferenceError：id未定义”指的是CellClicked（）函数中的id。

Answer 1

嗯，你的js中有太多错误。我不知道从哪里开始。 我必须给你一个新的方法：  1.将所有GetColour（）更改为GetColour（this）  2.将所有CellClicked（）更改为CellClicked（this）  3.在js中添加代码

var colorArr = [];
function GetColour(e) {
    colorArr.push(e.src);
}
function CellClicked(e) {
    var color = colorArr.pop();
    e.setAttribute("src", color);
}

Looks like this 你要找出的其他小错误。