[英]I am trying to create a increase in movement using shift key, but I don't know how to
[英]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
我正在嘗試創建一個鼠標事件,該事件允許用戶使用“ 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>
這應該現在工作
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.