Javascript 我试图创建一个鼠标事件，允许用户使用；ctrl"；键和shift键_Javascript_Html_Html5 Canvas_Mouseevent_Dom Events

Javascript 我试图创建一个鼠标事件，允许用户使用；ctrl"；键和shift键

javascript html html5-canvas

Javascript 我试图创建一个鼠标事件，允许用户使用；ctrl"；键和shift键,javascript,html,html5-canvas,mouseevent,dom-events,Javascript,Html,Html5 Canvas,Mouseevent,Dom Events,我正在尝试创建一个鼠标事件，允许用户使用“ctrl”键和shift键以红色或蓝色绘制，如果用户需要，还可以使用一个按钮擦除窗口，但在加载页面时没有发生任何事情。我的控制台中也没有任何错误。我不知道我错过了什么 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Erase Drawing Window</title>

我正在尝试创建一个鼠标事件，允许用户使用“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>


删除绘图窗口
桌子
{
宽度：400px；
边界塌陷：塌陷；
}
运输署
{
宽度：4px；
高度：4px；
}
按住Ctrl键（或Control键）以绘制蓝色。
按住Shift键以绘制红色。
函数createCanvas（）
{
var侧=100；
var tbody=document.getElementById（“表体”）；
对于（变量i=0；i
我看到您正在将td
样式设置为“红色”或“蓝色”，但我没有看到这些样式的声明
您也有语法错误-在shift键实现上e.targetsetAttribute
而不是e.target.setAttribute

如DFord所述，将
更新为

删除draw.js文件的


函数createCanvas（）{
var侧=100；
var tbody=document.getElementById（“表体”）；
对于（变量i=0；i

表格{
宽度：400px；
边界塌陷：塌陷；
}
运输署{
宽度：4px；
高度：4px；
}
蓝先生{
背景颜色：蓝色；
}
瑞德先生{
背景色：红色；
}

删除绘图窗口
按住Ctrl键（或Control键）绘制蓝色。按住Shift键绘制红色。
在
中，使用
而不是
。您在哪里创建html5画布？您刚刚创建了一个带有画布id的表。非常感谢。我还可以通过重新编码使我的按钮正常工作。我对此表示感谢。