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

Question

I am trying to create a mouse event that allows the user to draw in red or blue using the "ctrl" key and the shift key and has a button to erase the window if the user wants, but nothing is happening when I load the page. 我正在尝试创建一个鼠标事件，该事件允许用户使用“ ctrl”键和Shift键绘制红色或蓝色，并且如果用户需要，该按钮具有擦除窗口的按钮，但是加载页面时没有任何反应。 I also do not have any errors in my console. 我的控制台也没有任何错误。 I do not know what I am missing. 我不知道我在想什么。

<!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>

Answer 1

I see that your are setting the td style to 'red' or 'blue' but i don't see the declaration of those styles. 我看到您将td样式设置为“红色”或“蓝色”，但是我看不到这些样式的声明。
You have syntax error as well - on the shift key implementation e.targetsetAttribute instead of e.target.setAttribute 您也有语法错误-在Shift键实现上使用e.targetsetAttribute而不是e.target.setAttribute
Update the <script src = "draw.js"> to <script type="text/javascript"> as DFord said. 如DFord所说，将<script src = "draw.js">为<script type="text/javascript"> 。
Remove the including of the draw.js file 删除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.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>

this should work now 这应该现在工作

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-10-29 08:53:34

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-10-29 08:53:34

解决方案1
0 已采纳 2014-10-29 08:53:34