JavaScript Box

Page 1 of 1

2 Replies - 293 Views - Last Post: 12 February 2011 - 12:14 PM

#1 jball34337  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 21
  • Joined: 09-October 10

JavaScript Box

Posted 11 February 2011 - 07:31 PM

The program is suppose to make a box based on user input for height and width. The program is suppose to make two different kinds of boxes, one filled and one empty based on user choice. So i have figured out how to code this but I can't get the outline box to space correctly. So my problem is in case 0; where i try to use a $nbsp to show spaces but it only comes up as one space. So how do I get the webpage to show more than one white space. I know it's something stupid that I can't find in the book I'm using.

outlined box example
****
*  *
*  *
****

My code makes a outlined box that looks like
****
* *
* *
* *
****


Thanks for any help!! :punk: 


<?xml version="1.0" encoding="UTF-8"?>

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

		<title>Print line with Multiple statements in JavaScipt</title>
		<script type = "text/javascript">
		
		var Strheight = window.prompt("Enter the height of box");
		var Strwidth = window.prompt("Enter the width of box");
		var Strfilled = window.prompt("If you want the box filled input 1, if you want an outline input 0");
		
		var filled = parseInt(Strfilled);
		var height = parseInt(Strheight);
		var width = parseInt(Strwidth);
		
		
		switch(filled){
		//case if user picks filled box
		case 1:
		for(var j = height; j > 0; j--){
		for(var i = 0; i < width; i++){
		document.write("*");
		}//end width for
		
		document.write("<br />");
		} //end height for
		
	
		
		//Case to make unfilled box
		case 0:
		//for to write first line
		for(var i = 0; i < width; i++){
		document.write("*");
		}
		
		
		for(var j = height; j > 0; j--){
			document.write("<br />");
			document.write("*");
		
				for(var k = (width - 2); k > 0; k--){
					document.write("&nbsp");//This is wear I'm having problem
		
				}//end width for
	
			document.write("*");
			document.write("<br />");
		}//end width for
		
		//for to write last line
		for(var i = 0; i < width; i++){
			document.write("*");
		}		
		
	}
		
		
		</script>

	</head>

	<body>











	</body>

</html>


Is This A Good Question/Topic? 0
  • +

Replies To: JavaScript Box

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 919
  • View blog
  • Posts: 6,442
  • Joined: 07-September 06

Re: JavaScript Box

Posted 12 February 2011 - 12:16 AM

The problem you are having is that you are writing it out in a non-monospace font. If you take a look at it in monospace it is correct. The easiest way to fix this is to wrap your square in a span or some other tag that has the font-amily CSS attribute set to monospace.

That is what I did below (as well as removing one of the newline writes):
<?xml version="1.0" encoding="UTF-8"?>

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

		<title>Print line with Multiple statements in JavaScipt</title>
		<script type = "text/javascript">
		
		var Strheight = window.prompt("Enter the height of box");
		var Strwidth = window.prompt("Enter the width of box");
		var Strfilled = window.prompt("If you want the box filled input 1, if you want an outline input 0");
		
		var filled = parseInt(Strfilled);
		var height = parseInt(Strheight);
		var width = parseInt(Strwidth);
		
		
		switch(filled){
		//case if user picks filled box
		case 1:
		for(var j = height; j > 0; j--){
		for(var i = 0; i < width; i++){
		document.write("*");
		}//end width for
		
		document.write("<br />");
		} //end height for
		
	
		
		//Case to make unfilled box
		case 0:
document.write("<p style='font-family: monospace;'>");
		//for to write first line
		for(var i = 0; i < width; i++){
		document.write("*");
		}
		
		document.write("<br/>");
		for(var j = height; j > 0; j--){
			document.write("*");
		
				for(var k = (width - 2); k > 0; k--){
					document.write("&nbsp");//This is wear I'm having problem
		
				}//end width for
	
			document.write("*");
			document.write("<br />");
		}//end width for
		
		//for to write last line
		for(var i = 0; i < width; i++){
			document.write("*");
		}	
document.write("</p>");	
		
	}
		
		
		</script>

	</head>

	<body>











	</body>

</html>

Was This Post Helpful? 1
  • +
  • -

#3 jball34337  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 21
  • Joined: 09-October 10

Re: JavaScript Box

Posted 12 February 2011 - 12:14 PM

Thank works great. Thanks for the help i spent along time trying to figure out how to fix.

This post has been edited by jball34337: 12 February 2011 - 12:15 PM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1