Member Avatar for silkyheart

i need to make this work like it is supposed to pop out a message box containing the answer when i click a cell...
oh and i need to have a super randomized background that relies on Math.ceil(Math.random())... *how the hell would i know how to do this? i'm just a beginner...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
	<style type="text/css">
		body {
			margin-left: 20%;
			margin-right: 20%;
		}
		h1 {
			font-family: jokerman;
			text-align: center;
		}
		td {
			border-style: outset;
			border-width: 5px;
			border-color: gray;
			font-family: courier new;
		}
		td:hover {
			border-style: inset;
			color:red;
		}
	</style>
</head>
<body>
	<h1>Multiplication Table</h1>
	<br /><br /><br />
	<script type="text/javascript">
		mess = "Please enter the number of rows <1-10>."
		do {
			x = window.prompt(mess);
			x = parseInt(x);
			mess = mess + "\nInvalid entry. Please try again."
		} while (x<1 || x>10)
		
		mess2 = "Please enter the number of columns <1-10>."
		do {
			y = window.prompt(mess2);
			y = parseInt(y);
			mess2 = mess2 + "\nInvalid entry. Please try again."
		} while (y<1 || y>10)
		
		
		document.write("<table>");
		for (i=1; i<=x; i++) {	
			document.write("<tr>");
			for (j=1; j<=y; j++) {
				document.write("<td>", i, "*", j, "</td>");
				onClick="window.alert('i*j')";
			}
			document.write("</tr>");
		}
		document.write("</table>");
	</script>
</body>
</html>
  • 3 Contributors
  • 2 Replies
  • 424 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by macgurl70
Member Avatar for Gerbiler

instead of

document.write("<td>", i, "*", j, "</td>");
onClick="window.alert('i*j')";

do

document.write("<td onClick=\"eval(this.innerHtml);\">", i, "*", j, "</td>");

this is just a quick and dirty method. I don't understand what you mean by

oh and i need to have a super randomized background that relies on Math.ceil(Math.random())

.

Member Avatar for macgurl70

Ok, I admit this one got my curiosity up and I wanted to see if I could figure it out - and the first part I had to do was take it apart and do one part at a time:

First.. looked at your code where it stated it was the Multiplication Table - so I knew the end result table I would need. As you stated - it needs to take the number they enter and create an equal number of rows and columns. The "inside" cells would have to multiply the values of the first row with the values of the first column - giving you a multiplication table.

Looking at your original script - you didn't provide any place for the user to enter their number for how many cells are needed. This calculates the rows and columns at the same time - to keep it an equal square like other tables I saw.

They enter the number in one area - and the "onclick" of the button has the browser execute the javascript.

You are also missing that element in your coding - you need to have a trigger that lets the browser know when it has to execute specific code.

This code also uses a nested for statement - so I can create the rows, and then create the cells within each row.

I have also commented out the code for more clarity.

You're on your own with the rest, just remember that www.w3schools.com and google are your friends for finding coding information :)

// JavaScript Document
function buildTable(){
	//starting to name my variables and get my values for the output
	//the tablesize is the number they input the form
	var tablesize = document.getElementById('number').value;
	//I am simply establishing a variable to be used later
	var tablePlace = document.getElementById('tablehere');
	var arlen = tablesize;
	//Creating the elements of the table, this way the browser knows what
	//is expected when the function runs. Since these are in the main function
	//and not part of the loop, they are only created once.
	var table = document.createElement('table');
	var tablebody = document.createElement('tablebody');
	var text = "this is text here";
	var value = document.createTextNode(text);
	//the first for loop - this creates the number of rows that the table has
	for (i=0;i<tablesize;i++){
		var row=document.createElement('tr');
		//var cellArray = new Array();
		var cell2 = document.createElement('td');
		var content2 = document.createTextNode(i);
		cell2.appendChild(content2);
		row.appendChild(cell2);
		var x;
		//the second for loop that fills in all of the cells in the rows
		//instead of building in "columns" this builds the table row by row
		//so I am filling in each row with a specified number of cells that
		//will make up the columns of the table.
		for (x=1;x<tablesize;x++){
			if (i==0){
				var trying = i+x;}
				else{
				var trying = i*x;}
			var cell = document.createElement('td');
			var content = document.createTextNode(trying);
			//this is where I start to enter the content into each of the elements
			//I have defined as a variable
			cell.appendChild(content);
			row.appendChild(cell);
		}
		tablebody.appendChild(row);
	}
	table.appendChild(tablebody);
	var holder = document.getElementById('tablehere');
	var oldinfo = document.getElementById('tablehere').innerHTML;
	var testnumber = arlen;
	holder.replaceChild(table,holder.childNodes[0]);
}

This is the HTML code (below)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script language="JavaScript" type="text/javascript" src="tableBuilder.js"></script>
<style type="text/css">
table,th,td
{
border:1px solid black;
vertical-align:center;
text-align:center;
}

td {
 width:50px;
 height:50px;
 vertical-align:middle;
 }
 
</style>
<title>Untitled Document</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="input">
Number: 
  <input type="text" name="number" id="number" />
<input name="Button" type="button" onclick="buildTable();" value="Enter" />
<br />
</form>
<br />
<div id="tablehere">
Table result is here
</div>

</body>
</html>

good luck

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.