2 Replies - 6183 Views - Last Post: 02 October 2009 - 10:53 AM

#1 MacJava  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 31
  • Joined: 17-February 09

function erase

Post icon  Posted 01 October 2009 - 06:32 PM

Hey everyone, I just need some help on how to create an erase function with this code. I really don't know what to put inside of the function. If you can give some ideas I will appreciate it.

Thanks



<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<!-- Fig. 13.3: draw.html -->
<!-- A simple drawing program. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
	  <title>Simple Drawing Program</title>
	  <style type = "text/css">
		 #canvas { width: 400px;
				   border: 1px solid #999999;
				   border-collapse: collapse }
		 td	  { width: 4px;
				   height: 4px }
		 th.key  { font-family: arial, helvetica, sans-serif;
				   font-size: 12px; 
				   border-bottom: 1px solid #999999 }
	  </style>
	  <script type = "text/javascript">
		 <!--
		 //initialization function to insert cells into the table
		 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" );
				  cell.onmousemove = processMouseMove;
				  row.appendChild( cell );
			   } // end for
 
			   tbody.appendChild( row );
			} // end for
		 } // end function createCanvas
 
		 // processes the onmousemove event
		 function processMouseMove( e )
		 {			
			// get the event object from IE
			if ( !e )
			   var e = window.event;
 
			// turn the cell blue if the Ctrl key is pressed
			if ( e.ctrlKey )
			   this.style.backgroundColor = "blue";
		 
			// turn the cell red if the Shift key is pressed
			if ( e.shiftKey )
			   this.style.backgroundColor = "red";
 
	   // erases contents of cell by turning cell white when Alt key is pressed
		if ( e.altKey )
		   this.style.backgroundColor = "white";
		 } // end function processMouseMove

	 <!--function erase() {

	}-->

 
		 // -->
	  </script>
   </head>
   <body onload = "createCanvas()">
	  <table id = "canvas" class = "canvas"><tbody id = "tablebody">
	  <tr><th class = "key" colspan = "100">Hold <tt>ctrl</tt>
		 to draw blue. Hold <tt>shift</tt> to draw red. Hold <tt>alt</tt>
	 to erase.</th></tr>
	  </tbody></table>
	  <form>
	  <p>Click here to erase all:</p>
	  <input type = "button" value = "Erase" onclick = "erase()" />
	  </form>
   </body>
</html>





Is This A Good Question/Topic? 0
  • +

Replies To: function erase

#2 masteryee  Icon User is offline

  • D.I.C Regular

Reputation: 40
  • View blog
  • Posts: 271
  • Joined: 16-May 09

Re: function erase

Posted 01 October 2009 - 10:46 PM

Unfortunately, the innerHTML property of a tbody element is read-only, so you can't just blank out the HTML that easily. However, you could try removing all the rows from your tbody:

function erase()
{
   var tbody = document.getElementById("tablebody");
   var rows = tbody.rows;
   if (rows != null)
   {
      while (rows.length > 0)
         tbody.deleteRow();
   }
}


Was This Post Helpful? 0
  • +
  • -

#3 brianarn  Icon User is offline

  • New D.I.C Head

Reputation: 11
  • View blog
  • Posts: 27
  • Joined: 02-October 09

Re: function erase

Posted 02 October 2009 - 10:53 AM

That would actively remove them all - and you could do that and regenerate them, but I think that by erase, what is meant here is to set the background color back to white. Here's some code that does it.

My suggestion would be to call getElementsByTagName to get an array of your TD elements. Then, loop over said array and set the background color styles back to white. Here's the approach I took.

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";
	 }
}


It's not the fastest thing (as there's a lot of TDs to be selected), but it still only takes like a second to process. If you were using a JS library with more advanced selection features, it'd be easier to get and work with only the TDs that have a non-white background color, but this solution still works and is the simplest approach that'll work in everything. :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1