adding font type to different string arrays with in an array

Question

Dauthuzen 0 Newbie Poster

12 Years Ago

How do I add a different font type to each of the sting below in JS...

var conf={
	rotors:[
		['Q','W','E','R','T','Y','U','I','O','P','A','S','D','F','G','H','J','K','L','Z','X','C','V','B','N','M'],
		['P','O','I','U','Y','T','R','E','W','Q','L','K','J','H','G','F','D','S','A','M','N','B','V','C','X','Z'],
		['Q','A','Z','W','S','X','E','D','C','R','F','V','T','G','B','Y','H','N','U','J','M','I','K','O','L','P'],
		['P','L','O','K','M','I','J','N','U','H','B','Y','G','V','T','F','C','R','D','X','E','S','Z','W','A','Q'],
		['Z','M','X','N','C','B','V','A','L','S','K','D','J','F','H','G','Q','P','W','O','E','I','R','U','T','Y']
		],
	reflector:[['P','L','O','K','M','I','J','N','U','H','B','Y','G'], ['V','T','F','C','R','D','X','E','S','Z','W','A','Q']]
	}

I would like to change font for each seperate string

javascript

3 Contributors
4 Replies
185 Views
1 Day Discussion Span
Latest Post 12 Years Ago Latest Post by Airshow

Airshow 416 WiFi Lounge Lizard

12 Years Ago

Dauthutzen,

You could approach this in several different ways depending on exactly what you are trying to achieve.

One approach is to build HTML markup.

Here's a couple of utility functions, plus a demo of how they might be used:

<!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>
<style>
/*
Here set default styles for the container(s) in which character arrays are to be displayed
*/
.default_1 {
	font-family: times;
	font-size:   24pt;
}
.default_2 {
	font-family: arial;
	font-size:   12pt;
}
/* etc */
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type='text/javascript'>
function makeSpan(char, f){
	// Build and return styled span tag around char
	var fontProps = [];
	for(prop in f){ fontProps.push('font-' + prop + ':' + f[prop] + ';'); }
	return '<span style="' + fontProps.join(' ') + '">' + char + '</span>';
}
function makeOutputArray(charArray, fontObj){
	// Build and return styled version of charArray.
	var arr = [];
	for(var i=0; i<charArray.length; i++){
		arr.push(makeSpan(charArray[i], fontObj[charArray[i]]));
	}
	return arr;
}
onload = function(){
	var charArray = ['Q','W','E','R','T','Y','U','I','O','P','A','S','D','F','G','H','J','K','L','Z','X','C','V','B','N','M']
	var fontObj = {
		//Here set styles for any character not to receive the default style
		//Set all/any of family, size, style, weight in accordance with normal CSS attributes.
		Q: {family:'courier', weight:'bold', style:'italic'},
		Z: {family:'arial', size:'10pt'},
		B: {family:'verdana', style:'italic'},
		M: {weight:'normal', size:'48pt'},
		E: {family:'comic sans ms', style:'italic'},
		P: {family:'helvetica', weight:'bold', style:'italic'}
	};
	var el = document.getElementById('message');
	el.className = 'default_1';//set to default_1, default_2 etc.
	el.innerHTML = makeOutputArray(charArray, fontObj).join();
}
</script>
</head>

<body>

<div id="message"></div>

</body>
</html>

Notes
1. Default styles are established in the style sheet. If required, more than one default can be established.
2. fontObj objects could be hard-coded (as in the example) or built programmatically.
3. Specific directives are only necessary for those characters that must deviate from the chosen default.
4. As written, the code only addresses font properties. You would need to adapt it to set other styles - eg. color, background-color, underline.

Airshow

Edited 12 Years Ago by Airshow because: n/a

Reply to this topic

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.

Troy III 272 Posting Pro · Answer 1 · 2012-01-02T14:03:40+00:00

How do I add a different font type to each of the sting below in JS...

var conf={
	rotors:[
		['Q','W','E','R','T','Y','U','I','O','P','A','S','D','F','G','H','J','K','L','Z','X','C','V','B','N','M'],
		['P','O','I','U','Y','T','R','E','W','Q','L','K','J','H','G','F','D','S','A','M','N','B','V','C','X','Z'],
		['Q','A','Z','W','S','X','E','D','C','R','F','V','T','G','B','Y','H','N','U','J','M','I','K','O','L','P'],
		['P','L','O','K','M','I','J','N','U','H','B','Y','G','V','T','F','C','R','D','X','E','S','Z','W','A','Q'],
		['Z','M','X','N','C','B','V','A','L','S','K','D','J','F','H','G','Q','P','W','O','E','I','R','U','T','Y']
		],
	reflector:[['P','L','O','K','M','I','J','N','U','H','B','Y','G'], ['V','T','F','C','R','D','X','E','S','Z','W','A','Q']]
	}

I would like to change font for each seperate string

JavaScript doesn't bother itself with data presentation, you don't need js for that. The element receiving those data will format their font-types accordingly by means of CSS directives attached to it and with no scripting hassle. It's a clean thing.

Dauthuzen 0 Newbie Poster · Answer 2 · 2012-01-02T23:02:31+00:00

Dauthutzen,

You could approach this in several different ways depending on exactly what you are trying to achieve.

One approach is to build HTML markup.

Here's a couple of utility functions, plus a demo of how they might be used:

<!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>
<style>
/*
Here set default styles for the container(s) in which character arrays are to be displayed
*/
.default_1 {
	font-family: times;
	font-size:   24pt;
}
.default_2 {
	font-family: arial;
	font-size:   12pt;
}
/* etc */
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type='text/javascript'>
function makeSpan(char, f){
	// Build and return styled span tag around char
	var fontProps = [];
	for(prop in f){ fontProps.push('font-' + prop + ':' + f[prop] + ';'); }
	return '<span style="' + fontProps.join(' ') + '">' + char + '</span>';
}
function makeOutputArray(charArray, fontObj){
	// Build and return styled version of charArray.
	var arr = [];
	for(var i=0; i<charArray.length; i++){
		arr.push(makeSpan(charArray[i], fontObj[charArray[i]]));
	}
	return arr;
}
onload = function(){
	var charArray = ['Q','W','E','R','T','Y','U','I','O','P','A','S','D','F','G','H','J','K','L','Z','X','C','V','B','N','M']
	var fontObj = {
		//Here set styles for any character not to receive the default style
		//Set all/any of family, size, style, weight in accordance with normal CSS attributes.
		Q: {family:'courier', weight:'bold', style:'italic'},
		Z: {family:'arial', size:'10pt'},
		B: {family:'verdana', style:'italic'},
		M: {weight:'normal', size:'48pt'},
		E: {family:'comic sans ms', style:'italic'},
		P: {family:'helvetica', weight:'bold', style:'italic'}
	};
	var el = document.getElementById('message');
	el.className = 'default_1';//set to default_1, default_2 etc.
	el.innerHTML = makeOutputArray(charArray, fontObj).join();
}
</script>
</head>

<body>

<div id="message"></div>

</body>
</html>

Notes
1. Default styles are established in the style sheet. If required, more than one default can be established.
2. fontObj objects could be hard-coded (as in the example) or built programmatically.
3. Specific directives are only necessary for those characters that must deviate from the chosen default.
4. As written, the code only addresses font properties. You would need to adapt it to set other styles - eg. color, background-color, underline.

Airshow

My project is an engima emulator in javascript. My goal is to use a different font or symbol for each of the the 26 letter block in the rotors array, as well as to change the reflector-each 13 letter block, however the array is in one block, I'm looking on how to achieve this as I am a beginner in js. the code follows:

rotors:[
		['Q','W','E','R','T','Y','U','I','O','P','A','S','D','F','G','H','J','K','L','Z','X','C','V','B','N','M'],
		['P','O','I','U','Y','T','R','E','W','Q','L','K','J','H','G','F','D','S','A','M','N','B','V','C','X','Z'],
		['Q','A','Z','W','S','X','E','D','C','R','F','V','T','G','B','Y','H','N','U','J','M','I','K','O','L','P'],
		['P','L','O','K','M','I','J','N','U','H','B','Y','G','V','T','F','C','R','D','X','E','S','Z','W','A','Q'],
		['Z','M','X','N','C','B','V','A','L','S','K','D','J','F','H','G','Q','P','W','O','E','I','R','U','T','Y']
		],
	reflector:[['P','L','O','K','M','I','J','N','U','H','B','Y','G'], ['V','T','F','C','R','D','X','E','S','Z','W','A','Q']]
	}

function $(id){
	return document.getElementById(id);
	}

function encrypt(type){

	// check input
	var input=$(type+'input').value.toUpperCase().replace(' ','');
	if (!input.match(/^[A-Z]+$/i)){
		showError('The '+(type=='dec_' ? 'cipher' : 'plain')+'text must only contain the letters A-Z.');
		}
	
	// check plugboard
	var plug=[].slice.call($(type+'plugboard').getElementsByTagName('select'));
	var charmaps=[[],[]];
	plug.forEach(function(s, i){
		charmaps[i % 2 ? 1 : 0].push(s.options[s.selectedIndex].value);
		});
	
	if (charmaps[0].concat(charmaps[1]).join('').match(/(.).*\1/)){
		showError('The '+(type=='dec_' ? 'receiver' : 'sender')+'\'s plugboard cannot connect the same character twice.');
		return;
		}
		
	// check rotors
	var rotor=[].slice.call($(type+'rotors').getElementsByTagName('select'));
	var rotorSlot=[], rotorPos=[];
	rotor.forEach(function(r, i){
		if (i % 2){
			rotorPos.push(r.options[r.selectedIndex].value);
			}
		else{
			rotorSlot.push(r.options[r.selectedIndex].value);
			}
		});
	
	if (rotorSlot.join('').match(/(.).*\1/)){
		showError('The '+(type=='dec_' ? 'receiver' : 'sender')+' cannot use the same rotor twice.');
		return;
		}
		
	// get ring
	var ring=[].slice.call($(type+'rings').getElementsByTagName('select')).map(function(r){
		return r.options[r.selectedIndex].value;
		});
		
	var enigma=new Enigma();
	enigma.plugboard=new CharMap(charmaps[0], charmaps[1]);
	enigma.rotors.push(new Rotor(conf.rotors[(rotorSlot[0]*1)-1].slice(), Rotor.alphabet.indexOf(rotorPos[0]), Rotor.alphabet.indexOf(ring[0])));
	enigma.rotors.push(new Rotor(conf.rotors[(rotorSlot[1]*1)-1].slice(), Rotor.alphabet.indexOf(rotorPos[1]), Rotor.alphabet.indexOf(ring[1])));
	enigma.rotors.push(new Rotor(conf.rotors[(rotorSlot[2]*1)-1].slice(), Rotor.alphabet.indexOf(rotorPos[2]), 0));
	enigma.reflector=new CharMap(conf.reflector[0], conf.reflector[1]);
	
	$(type+'output').value=enigma.translate(input);
	
	}
	
function showError(msg){
var e=$('error');
e.innerHTML=msg;
e.style.display='block';
setTimeout(function(){
	e.style.display='none';
	}, 4000);
}
	
function toggle(bttn){
var s=bttn.innerHTML.match(/show/i);
bttn.innerHTML=(s ? 'Hide' : 'Show')+' settings';
bttn.parentNode.parentNode.getElementsByTagName('div')[0].style.display=s ? 'block' : 'none';
}

function send(){
$('dec_input').value=$('enc_output').value;
}

</script>

<style type='text/css'>

* {
	margin:0px;
	padding:0px;
	}
	
h1, h2, h3 {
	font-family:georgia;
	font-weight:normal;
	}

h2 {
	position:relative;
	margin-bottom:5px;
	}
	
h3 {
	margin:15px 0 15px 0;
	}
	
body {
	margin:20px;
	}
	
#wrapper {
	position:relative;
	border-top:solid 2px #CCE0F2;
	margin-top:15px;
	padding-top:15px;
	}
	
#wrapper div.enigma {
	float:left;
	width:50%;
	}
	
.enigma div.plugboard {
	float:left;
	width:30%;
	}
	
.enigma div.rotors {
	float:left;
	width:60%;
	}
	
.plugboard select {
	width:50px;
	}
	
.enigma p {
	margin:6px 0 6px 0;
	}
	
div.message {
	clear:left;
	padding-top:30px;
	}
	
.message input {
	border:solid black 1px;
	font-size:12pt;
	padding:5px;
	width:70%;
	}
	
button {
	border:solid black 1px;
	font-size:12pt;
	padding:5px;
	margin-left:5px;
	cursor:pointer;
	outline:none;
	}
	
div button {
	width:75px;
	}
	
h2 button {
	position:absolute;
	top:0px;
	left:200px;
	width:140px;
	}
	
#dec_output, #enc_output {
	background:#CCE0F2;
	}
	
#error {
	margin:15px 0 15px 0;
	padding:5px;
	color:black;
	background:#FADACA;
	border:solid 1px #FF0038;
	display:none;
	}

</style>

</head>
<body>

<h1>Enigma emulator in JavaScript</h1>
<p>This page contains a pair of configurable Enigma machines. Play with the settings, and encrypt / decrypt messages. <a href='http://gbradley.com/2010/08/30/emulating-enigma-in-javascript'>Read about Enigma</a>.</p>
<p id='error'>The plaintext must only contain the characters A-Z!</p>
<div id='wrapper'>
	<div class='enigma'>
		<h2>Bob <button onclick='toggle(this)'>Show settings</button></h2>
		<div style='display:none'>

			<div class='plugboard' id='enc_plugboard'>
				<h3>Plugboard</h3>
				<select>
					<option value='A' selected='selected'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select> &lt;-&gt; <select>
					<option value='A'>A</option><option value='B' selected='selected'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select><br />
				<select>
					<option value='A'>A</option><option value='B'>B</option><option value='C' selected='selected'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select> &lt;-&gt; <select>
					<option value='A'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D' selected='selected'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select><br />
				<select>
					<option value='A'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E' selected='selected'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select> &lt;-&gt; <select>
					<option value='A'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F' selected='selected'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select><br />
				<select>
					<option value='A'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G' selected='selected'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select> &lt;-&gt; <select>
					<option value='A'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H' selected='selected'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select><br />
				<select>
					<option value='A'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I' selected='selected'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select> &lt;-&gt; <select>
					<option value='A'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J' selected='selected'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select><br />
				<select>
					<option value='A'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K' selected='selected'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select> &lt;-&gt; <select>
					<option value='A'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L' selected='selected'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select>
			</div>
			<div class='rotors'>
				<h3>Rotors</h3>
				<div id='enc_rotors'>
					<p><select><option value='1' selected='selected'>Rotor 1</option><option value='2'>Rotor 2</option><option value='3'>Rotor 3</option><option value='4'>Rotor 4</option><option value='5'>Rotor 5</option></select> starting at <select><option value='A' selected='selected'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option></select></p>

					<p><select><option value='1'>Rotor 1</option><option value='2' selected='selected'>Rotor 2</option><option value='3'>Rotor 3</option><option value='4'>Rotor 4</option><option value='5'>Rotor 5</option></select> starting at <select><option value='A'>A</option><option value='B' selected='selected'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option></select></p>

					<p><select><option value='1'>Rotor 1</option><option value='2'>Rotor 2</option><option value='3' selected='selected'>Rotor 3</option><option value='4'>Rotor 4</option><option value='5'>Rotor 5</option></select> starting at <select><option value='A'>A</option><option value='B'>B</option><option value='C' selected='selected'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option></select></p>

				</div>
				<h3>Rings</h3>
				<div id='enc_rings'>
					<p>Ring A at position <select><option value='A' selected='selected'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option></select>

					<p>Ring B at position <select><option value='A'>A</option><option value='B' selected='selected'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option></select>

				</div>
			</div>
		</div>
		<div class='message'>
			<h3>Plaintext</h3>
			<input type='text' id='enc_input' /><button onclick='encrypt("enc_")'>Encrypt</button>
			<h3>Ciphertext</h3>

			<input type='text' id='enc_output' readonly='readonly' /><button onclick='send()'>Send</button>
		</div>
	</div>
	<div class='enigma receiver'>
		<h2>Alice <button onclick='toggle(this)'>Show settings</button></h2>
		<div style='display:none'>
			<div class='plugboard' id='dec_plugboard'>

				<h3>Plugboard</h3>
				<select>
					<option value='A' selected='selected'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select> &lt;-&gt; <select>
					<option value='A'>A</option><option value='B' selected='selected'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select><br />
				<select>
					<option value='A'>A</option><option value='B'>B</option><option value='C' selected='selected'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select> &lt;-&gt; <select>
					<option value='A'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D' selected='selected'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select><br />
				<select>
					<option value='A'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E' selected='selected'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select> &lt;-&gt; <select>
					<option value='A'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F' selected='selected'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select><br />
				<select>
					<option value='A'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G' selected='selected'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select> &lt;-&gt; <select>
					<option value='A'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H' selected='selected'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select><br />
				<select>
					<option value='A'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I' selected='selected'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select> &lt;-&gt; <select>
					<option value='A'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J' selected='selected'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select><br />
				<select>
					<option value='A'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K' selected='selected'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select> &lt;-&gt; <select>
					<option value='A'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L' selected='selected'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option>

				</select>
			</div>
			<div class='rotors'>
				<h3>Rotors</h3>
				<div id='dec_rotors'>
					<p><select><option value='1' selected='selected'>Rotor 1</option><option value='2'>Rotor 2</option><option value='3'>Rotor 3</option><option value='4'>Rotor 4</option><option value='5'>Rotor 5</option></select> starting at <select><option value='A' selected='selected'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option></select></p>

					<p><select><option value='1'>Rotor 1</option><option value='2' selected='selected'>Rotor 2</option><option value='3'>Rotor 3</option><option value='4'>Rotor 4</option><option value='5'>Rotor 5</option></select> starting at <select><option value='A'>A</option><option value='B' selected='selected'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option></select></p>

					<p><select><option value='1'>Rotor 1</option><option value='2'>Rotor 2</option><option value='3' selected='selected'>Rotor 3</option><option value='4'>Rotor 4</option><option value='5'>Rotor 5</option></select> starting at <select><option value='A'>A</option><option value='B'>B</option><option value='C' selected='selected'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option></select></p>

				</div>
				<h3>Rings</h3>
				<div id='dec_rings'>
					<p>Ring A at position <select><option value='A' selected='selected'>A</option><option value='B'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option></select>

					<p>Ring B at position <select><option value='A'>A</option><option value='B' selected='selected'>B</option><option value='C'>C</option><option value='D'>D</option><option value='E'>E</option><option value='F'>F</option><option value='G'>G</option><option value='H'>H</option><option value='I'>I</option><option value='J'>J</option><option value='K'>K</option><option value='L'>L</option><option value='M'>M</option><option value='N'>N</option><option value='O'>O</option><option value='P'>P</option><option value='Q'>Q</option><option value='R'>R</option><option value='S'>S</option><option value='T'>T</option><option value='U'>U</option><option value='V'>V</option><option value='W'>W</option><option value='X'>X</option><option value='Y'>Y</option><option value='Z'>Z</option></select>

				</div>
			</div>
		</div>
		<div class='message'>
			<h3>Ciphertext</h3>
			<input type='text' id='dec_input' /><button onclick='encrypt("dec_")'>Decrypt</button>
			<h3>Plaintext</h3>

			<input type='text' id='dec_output' readonly='readonly' />
		</div>
	</div>
</div>
</body>
</html>

any help would be greatly appreciated

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2012-01-03T07:31:13+00:00

Yes, I can tell from your original post what you are trying to achieve but I haven't got the time to penetrate 352 lines of code.

What I have given you is a couple of utility functions based on my understanding of what you asked for. These utilities are probably more comprehensive than you need. It's up to you how you incorporate them into the application.

Here's a bit more of a clue:

//Find containers in the DOM
var rotorContainer_0 = $('rotor_0');
var rotorContainer_1 = $('rotor_1');
var rotorContainer_2 = $('rotor_2');
var rotorContainer_3 = $('rotor_3');
var rotorContainer_4 = $('rotor_4');
//Set containers' default styles (optional)
rotorContainer_0.className = 'default_1';
rotorContainer_1.className = 'default_1';
rotorContainer_2.className = 'default_1';
rotorContainer_3.className = 'default_1';
rotorContainer_4.className = 'default_1';
//Establish a highlight style
var highlight = {size:'20pt'};
//...
//Select one or more characters to be highlighted with "highlight"
var fontObj_0 = {
	B: highlight,
	P: highlight
};
//...
//Display rotor_0 is its container.
rotorContainer_0.innerHTML = makeOutputArray(conf.rotors[0], fontObj_0).join(' ');

If this is not exactly what you have in mind, then you will have to adapt my code.

Airshow