<!DOCTYPE html>
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Squares</title>
<script type="text/javascript">
function SayColor(color) {
document.getElementById('message').innerHTML = "You clicked on the " + color + " square!";
}
</script>
</head>
<body>
<div style="text-align:center">
<button onclick="SayColor()> <img src="red-square.png" height="150" width="150" ></button>
<img src="green-square.png" height="150" width="150">
<img src="blue-square.png" height="150" width="150">
<h3 id="message">
</h3>
</div>
</body>
</html>
这是我对代码开头的尝试，我不知道如何完成它。我熟悉事件处理程序，但不熟悉函数。我试图在每个图片框中显示点击时的文字，内容为 "你点击了[正方形的颜色]正方形！"
好吧，我看到你正在定义函数，但它需要一些参数，而你没有传递。如果你只需要点击，就不需要按钮，你可以尝试像下面这样，为图片dom元素本身添加事件处理程序。P.S你不能把它传成红色，因为它将会是我们未定义的，所以在这里传一个字符串值。
<!DOCTYPE html>
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Squares</title>
<script type="text/javascript">
function SayColor(color) {
document.getElementById('message').innerHTML = "You clicked on the " + color + " square!";
}
</script>
</head>
<body>
<div style="text-align:center">
<img onclick=SayColor("RED") src="red-square.png" height="150" width="150" >
<img onclick=SayColor("Green") src="green-square.png" height="150" width="150">
<img onclick=SayColor("Blue") src="blue-square.png" height="150" width="150">
<h3 id="message">
</h3>
</div>
</body>
</html>
希望能帮到你 编码愉快