on单击调色板

onClick colour palette

本文关键字：调色板 单击 on      更新时间：2023-09-26

我正在尝试制作一个调色板，这样我就可以按下颜色，然后按下表格中的空白处，空格就会变为我选择的颜色。这是通过使用图像实现的。我对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的控制台时，点击一种颜色什么都不显示（假设并希望它有效。但然后按下空白处放置颜色，我会收到一个错误，说"Uncaught ReferenceError:id is not defined"，指的是CellClicked（）函数中的id。

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

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

看起来像这样其他小错误需要你去发现。

相关文章：