need help with javascript program

ibex333 · May 20, 2013

If you just copy paste the code and save as html document, you'll see that this displays buttons from A to Z and buttons for backspace and clear, which can be typed into the input box.

I want to separate the buttons such that I only have 9 per line. I have no idea how to do that, and I could really use some help.. Thanks!

PS: Off course, the last line will not have 9 buttons, and that is fine. It will have whatever is left.

Code:

<!DOCTYPE html>
<html>
<head>
	<title>Typewriter</title>
	<script>
		function backSpace() {
			var t = document.typing.disp.value;
			var n = t.substr(0, t.length - 1);
			document.typing.disp.value = n;
		}
	</script>
</head>
<body>
	<form id="typing" name="typing">
		<input type="text" id="disp" name="disp" size="50" value="" disabled="disabled" />
		<script type="text/javascript">
		for (k = 65; k <= 90; k++) {
			letter = String.fromCharCode(k);
			document.write("<input type=\"button\" value=\""+letter+"\" onclick=\"document.typing.disp.value += '"+letter+"';\" />");
		}
		</script>
		<input type="button" value="CLR" onclick="document.typing.disp.value = '';" />
		<input type="button" value="<--" onclick="backSpace();" />
	</form>
</body>
</html>

Jaydip · May 20, 2013

ibex333 said:
If you just copy paste the code and save as html document, you'll see that this displays buttons from A to Z and buttons for backspace and clear, which can be typed into the input box.

I want to separate the buttons such that I only have 9 per line. I have no idea how to do that, and I could really use some help.. Thanks!

PS: Off course, the last line will not have 9 buttons, and that is fine. It will have whatever is left.

Code:

<!DOCTYPE html> <html> <head> <title>Typewriter</title> <script> function backSpace() { var t = document.typing.disp.value; var n = t.substr(0, t.length - 1); document.typing.disp.value = n; } </script> </head> <body> <form id="typing" name="typing"> <input type="text" id="disp" name="disp" size="50" value="" disabled="disabled" /> <script type="text/javascript"> for (k = 65; k <= 90; k++) { letter = String.fromCharCode(k); document.write("<input type=\"button\" value=\""+letter+"\" onclick=\"document.typing.disp.value += '"+letter+"';\" />"); } </script> <input type="button" value="CLR" onclick="document.typing.disp.value = '';" /> <input type="button" value="<--" onclick="backSpace();" /> </form> </body> </html>

you can add these lines after the for loop

Code:

if (k==73)
document.write("<br>");
else if(k==82)
document.write("<br>");

Very crude but will get the job done.You can use the "||" operator instead.

Tweak155 · May 20, 2013

Jaydip said:
you can add these lines after the for loop

Code:

if (k==73) document.write("<br>"); else if(k==82) document.write("<br>");

Very crude but will get the job done.You can use the "||" operator instead.

Don't do any JS myself, does the MOD operator work in JS? You can do something like if(k MOD 9 == 0) then insert the BR. If you don't want the breaks in a funky spot, start a counter variable to use in your MOD statement.

EDIT:

From what I remember, JS is a lot like C++. The MOD operator in C++ is %.

EDIT EDIT:

Since you posted the code, I could play with it. MOD function works! Here you go:

Code:

<!DOCTYPE html>
<html>
<head>
	<title>Typewriter</title>
	<script>
		function backSpace() {
			var t = document.typing.disp.value;
			var n = t.substr(0, t.length - 1);
			document.typing.disp.value = n;
		}
	</script>
</head>
<body>
	<form id="typing" name="typing">
		<input type="text" id="disp" name="disp" size="50" value="" disabled="disabled" />
		<script type="text/javascript">
		var cnt = 0;
		for (k = 65; k <= 90; k++) {
			if (cnt % 9 == 0)
			document.write("<br/>");
			cnt++;
			letter = String.fromCharCode(k);
			document.write("<input type=\"button\" value=\""+letter+"\" onclick=\"document.typing.disp.value += '"+letter+"';\" />");

		}
		</script>
		<input type="button" value="CLR" onclick="document.typing.disp.value = '';" />
		<input type="button" value="<--" onclick="backSpace();" />
	</form>
</body>
</html>

EDIT * 3:

Just to explain what the MOD operator does is it takes a number, divides it by a specified number (in this case, 9) and tells you if there is a remainder. If you do 0 MOD any number your answer will be 0. But for example if you do 9 MOD 9, you get 0 as a remainder so the MOD function returns a 0. It's very useful for doing things every X number of times (also commonly used to determine if a number is odd or even: 9 mod 2 is 1, therefor 9 is odd; 12 mod 2 is 0, therefor the number is even).

Jaydip · May 20, 2013

Tweak155 said:
Don't do any JS myself, does the MOD operator work in JS? You can do something like if(k MOD 9 == 0) then insert the BR. If you don't want the breaks in a funky spot, start a counter variable to use in your MOD statement.

EDIT:

From what I remember, JS is a lot like C++. The MOD operator in C++ is %.

"||" is actually the logical OR operator in JS . I mentioned that if op doesn't like "if...elseif" branch.

Tweak155 · May 20, 2013

Jaydip said:
"||" is actually the logical OR operator in JS . I mentioned that if op doesn't like "if...elseif" branch.

Yes I know that, thanks though

EDIT:

To be clear, in this scenario if you know you will only need 2 breaks, the simple OR statement is the best choice. I've listed a method which will allow you to expand the character options and not have to concern yourself with where to place the breaks. Also I feel it helps you learn the power of learning the language.

In this scenario, I would use Jaydip's approach. I listed mine for other possible uses in the future (and to see if I could get something to work in JS )

The best code for this small example is:

Code:

if (k==65 || k==74 || k==83)
document.write("<br/>");

Markbnj · May 20, 2013

Or you could avoid javascript altogether, write the buttons into a div, and set the width of the div as an appropriate multiple of the button width. The buttons will wrap naturally, and ultimately this is a more flexible approach to use in the future, where you might have to deal with different types of devices.

Tweak155 · May 20, 2013

Markbnj said:
Or you could avoid javascript altogether, write the buttons into a div, and set the width of the div as an appropriate multiple of the button width. The buttons will wrap naturally, and ultimately this is a more flexible approach to use in the future, where you might have to deal with different types of devices.

Example? I've done a few websites but I've not fully grasped DIVs even though I use them.

Markbnj · May 20, 2013

Tweak155 said:
Example? I've done a few websites but I've not fully grasped DIVs even though I use them.

Here you go. You can play with the widths.

http://jsfiddle.net/dSVfM/

Tweak155 · May 20, 2013

Markbnj said:
Here you go. You can play with the widths.

http://jsfiddle.net/dSVfM/

Oh I see what you mean now. But how would you add the gaps? Just by inserting breaks?

Markbnj · May 20, 2013

Tweak155 said:
Oh I see what you mean now. But how would you add the gaps? Just by inserting breaks?

Not sure what gaps you're talking about. Can you be more specific?

ibex333 · May 20, 2013

Thanks a lot, everyone!

Tweak155 · May 21, 2013

Markbnj said:
Not sure what gaps you're talking about. Can you be more specific?

He wanted a break every 9 buttons.

Markbnj · May 21, 2013

Tweak155 said:
He wanted a break every 9 buttons.

I read the OP as requiring the buttons to wrap to a new line after nine instances. This is achieved by setting the div width appropriately. I don't see any real need for hard breaks.

Tweak155 · May 22, 2013

Markbnj said:
I read the OP as requiring the buttons to wrap to a new line after nine instances. This is achieved by setting the div width appropriately. I don't see any real need for hard breaks.

Gotcha. Makes sense now. The width will force the buttons to wrap.

LumbergTech · May 27, 2013

I guess this isn't the favored solution, but heres what I did without reading the thread:

Code:

	var offset = 65;
		
		 document.write("<br />");
		
		for (k = 0; k <= 25; k++) {
			
			letter = String.fromCharCode(k + offset);
			
			document.write("<input type=\"button\" value=\""+letter+"\" onclick=\"document.typing.disp.value += '"+letter+"';\" />");
						
			if(k > 1 && k % 9 == 0)
			{
			  document.write("<br />");
			}
		}

need help with javascript program

ibex333

Diamond Member

Jaydip

Diamond Member

Tweak155

Lifer

Jaydip

Diamond Member

Tweak155

Lifer

Markbnj

Elite Member <br>Moderator Emeritus

Tweak155

Lifer

Markbnj

Elite Member <br>Moderator Emeritus

Tweak155

Lifer

Markbnj

Elite Member <br>Moderator Emeritus

ibex333

Diamond Member

Tweak155

Lifer

Markbnj

Elite Member <br>Moderator Emeritus

Tweak155

Lifer

LumbergTech

Diamond Member

TRENDING THREADS