我正在尝试创建一个鼠标事件，该事件允许用户使用“ ctrl”键和Shift键绘制红色或蓝色，并且如果用户需要，该按钮具有擦除窗口的按钮，但是加载时没有任何反应这一页。我的控制台也没有任何错误。我不知道我在想什么。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Erase Drawing Window</title>
<style>
table
{
width: 400px;
border-collapse:collapse;
}
td
{
width: 4px;
height: 4px;
}
</style>
<script src = "draw.js">
</script>
</head>
<body>
<table id = "canvas">
<caption>Hold <em>Ctrl</em> (or <em>Control</em>) to draw blue.
Hold <em>Shift</em> to draw red.</caption>
<tbody id = "tablebody"></tbody>
</table>
<script src = "draw.js">
function createCanvas()
{
var side = 100;
var tbody = document.getElementById( "tablebody" );
for ( var i = 0; i < side; ++i )
{
var row = document.createElement( "tr" );
for ( var j = 0; j < side; ++j )
{
var cell = document.createElement( "td" );
row.appendChild( cell );
}
tbody.appendChild( row );
}
document.getElementById( "canvas" ). addEventListener(
"mousemove", processMouseMove, false );
}
function processMouseMove( e)
{
if (e.target.tagName.toLowerCase() == "td" )
{
if ( e.ctrlKey )
{
e.target.setAttribute( "class", "blue" );
}
if ( e.shiftKey )
{
e.targetsetAttribute ( "class", "red" );
}
}
}
window.addEventListener( "load", createCanvas, false );
console.log('You entered', x);
function erase()
{
var tb=document.getElementsByTagName('table');
var tbc=tb[0].getElementsByTagName('td');
for(k=0;k<tbc.length;k++){tbc[k].style.backgroundColor='pink'}
}
</script>
</body>
我看到您正在将td样式设置为“红色”或“蓝色”，但我看不到这些样式的声明。
您也有语法错误-Shift键实现是e.targetsetAttribute而不是e.target.setAttribute
按照DFord的说法将<script src = "draw.js">更新为<script type="text/javascript">。
function createCanvas() {
var side = 100;
var tbody = document.getElementById("tablebody");
for (var i = 0; i < side; ++i) {
var row = document.createElement("tr");
for (var j = 0; j < side; ++j) {
var cell = document.createElement("td");
row.appendChild(cell);
}
tbody.appendChild(row);
}
document.getElementById("canvas").addEventListener(
"mousemove", processMouseMove, false);
}
function processMouseMove(e) {
if (e.target.tagName.toLowerCase() == "td") {
if (e.ctrlKey) {
e.target.setAttribute("class", "blue");
}
if (e.shiftKey) {
e.target.setAttribute("class", "red");
}
}
}
window.addEventListener("load", createCanvas, false);
function erase() {
var tb = document.getElementsByTagName('table');
var tbc = tb[0].getElementsByTagName('td');
for (k = 0; k < tbc.length; k++) {
tbc[k].style.backgroundColor = 'pink'
}
}table {
width: 400px;
border-collapse: collapse;
}
td {
width: 4px;
height: 4px;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Erase Drawing Window</title>
<body>
<table id="canvas">
<caption>Hold <em>Ctrl</em> (or <em>Control</em>) to draw blue. Hold <em>Shift</em> to draw red.</caption>
<tbody id="tablebody"></tbody>
</table>
</body>现在应该可以使用