ADD A BUTTON TO THIS PROGRAM TO ERASE THE ENTIRE DRAWING WINDOW. <!DOCTYPE html>
ID: 671770 • Letter: A
Question
ADD A BUTTON TO THIS PROGRAM TO ERASE THE ENTIRE DRAWING WINDOW.
<!DOCTYPE html>
<html>
<head>
<title>Exercise 13.3 </title>
<style>
#canvas { width: 400px;
border: 1px solid #999999;
border-collapse: collapse }
td { width: 4px; height: 4px; margin: 0px; padding: 0px; }
.blue { background-color: blue; }
.red { background-color: red; }
.white { background-color: white; }
</style>
<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);
} // end for
tbody.appendChild(row);
} // end for
// register mousemove listener for the table
document.getElementById("canvas").addEventListener(
"mousemove", processMouseMove, false);
} // end function createCanvas
// processes the onmousemove event
function processMouseMove(e) {
if (e.target.tagName.toLowerCase() == "td") {
// turn the cell blue if the Ctrl key is pressed
if (e.ctrlKey) {
e.target.setAttribute("class", "blue");
} // end if
// turn the cell red if the Shift key is pressed
if (e.shiftKey) {
e.target.setAttribute("class", "red");
} // end if
if (e.altKey) {
e.target.setAttribute("class", "white");
}
} // end if
} // end function processMouseMove
window.addEventListener("load", createCanvas, false);
</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. Hold <em>Alt</em> to erase.</caption>
<tbody id = "tablebody"></tbody>
</table>
</body>
</html>
Explanation / Answer
ADD A BUTTON TO THIS PROGRAM TO ERASE THE ENTIRE DRAWING WINDOW.
<!DOCTYPE html>
<html>
<head>
<title>Exercise 13.3 </title>
<style>
#canvas { width: 400px;
border: 1px solid #999999;
border-collapse: collapse }
td { width: 4px; height: 4px; margin: 0px; padding: 0px; }
.blue { background-color: blue; }
.red { background-color: red; }
.white { background-color: white; }
</style>
<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);
} // end for
tbody.appendChild(row);
} // end for
// register mousemove listener for the table
document.getElementById("canvas").addEventListener(
"mousemove", processMouseMove, false);
} // end function createCanvas
// processes the onmousemove event
function processMouseMove(e) {
if (e.target.tagName.toLowerCase() == "td") {
// turn the cell blue if the Ctrl key is pressed
if (e.ctrlKey) {
e.target.setAttribute("class", "blue");
} // end if
// turn the cell red if the Shift key is pressed
if (e.shiftKey) {
e.target.setAttribute("class", "red");
} // end if
if (e.altKey) {
e.target.setAttribute("class", "white");
}
} // end if
} // end function processMouseMove
function erase() {
// Get all of the TDs inside of my table body
var allTDs = document.getElementById("tablebody").getElementsByTagName("td");
// Loop over them all
for (i = 0; i < allTDs.length; i++) {
// Set the background color to white
allTDs[i].style.backgroundColor = "white";
}
}
window.addEventListener("load", createCanvas, false);
</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. Hold <em>Alt</em> to erase. click Erase Button to Erase Total Canvas</caption>
<tbody id = "tablebody"></tbody>
</table>
<form>
<p>Click here to erase all:</p>
<input type = "button" value = "Erase" />
</form>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.