我正在尝试创建一个鼠标事件，允许用户使用 "ctrl" 键和 shift 键绘制红色或蓝色

我正在尝试创建一个鼠标事件，该事件允许用户使用"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样式设置为"红色"或"蓝色"，但我没有看到这些样式的声明。
您也有语法错误-在移位键实现e.targetsetAttribute而不是e.target.setAttribute 上
如DFord所述，将<script src = "draw.js">更新为<script type="text/javascript">。
删除draw.js文件的include

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>

这应该现在工作

相关内容

最新更新

热门标签：