Hi,
I am trying to create a dynamic keyboard which appears as a normal keyboard (a,b,c,d,e etc...) but if the 'qwerty' button is pressed, all of the keys values are changed so that it looks and acts like a qwerty keyboard (q,w,e,r,t,y etc...).

I have this code so far:

Code:
var normalkeyboard=[];
var qwertykeyboard=[];
normalkeyboard=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
qwerty=["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"];
<form name='keyform'>
If(btnalphabet==true){
for(i=0;i<1;i++){
<input id="btna" type="button" value="normalkeyboard[i]" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btna.value;'/>
<input id="btnb" type="button" value="normalkeyboard[i+1]" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btnb.value;'/>
<input id="btnc" type="button" value="C" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btnc.value;'/>
<input id="btnd" type="button" value="D" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btnd.value;'/>
<input id="btne" type="button" value="E" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btne.value;'/>
<input id="btnf" type="button" value="F" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btnf.value;'/>
<input id="btng" type="button" value="G" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btng.value;'/>
<input id="btnh" type="button" value="H" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btnh.value;'/>
<input id="btni" type="button" value="I" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btni.value;'/>
<input id="text1" type="text" style="width: 350px; height: 30px" />
<br />
<input id="btnj" type="button" value="J" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btnj.value;'/>
<input id="btnk" type="button" value="K" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btnk.value;'/>
<input id="btnl" type="button" value="L" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btnl.value;'/>
<input id="btnm" type="button" value="M" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btnm.value;'/>
<input id="btnn" type="button" value="N" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btnn.value;'/>
<input id="btno" type="button" value="O" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btno.value;'/>
<input id="btnp" type="button" value="P" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btnp.value;'/>
<input id="btnq" type="button" value="Q" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btnq.value;'/>
<input id="btnr" type="button" value="R" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btnr.value;'/>
<input id="btnback1" type="button" value="Back1" onclick="back1();" style="width: 116px; height: 40px" /><input id="btnsearch" type="button" value="Search" style="width: 117px; height: 40px" /><input id="btnreset" type="button" value="Reset" style="width: 116px; height: 40px" onclick='reset();' />
<br />
<input id="btnnone" type="button" value=" " style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btnnone.value;'/>
<input id="btns" type="button" value="S" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btns.value;'/>
<input id="btnt" type="button" value="T" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btnt.value;'/>
<input id="btnu" type="button" value="U" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btnu.value;'/>
<input id="btnv" type="button" value="V" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btnv.value;'/>
<input id="btnw" type="button" value="W" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btnw.value;'/>
<input id="btnx" type="button" value="X" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btnx.value;'/>
<input id="btny" type="button" value="Y" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btny.value;'/>
<input id="btnz" type="button" value="Z" style="width: 60px; height: 40px" onclick='document.getElementById("text1").value+=document.keyform.btnz.value;'/>
		}
	}
}
<input id="btnalphabet" type="button" value="Alphabet" style="width: 173px; height: 40px" />
<input id="btnkeyboard" type="button" value="Keyboard" style="width: 173px; height: 40px" />
</form>
I will be using arrays to do this, but I just need to know how to make an array value appear in one of the button values, so button a's value is the same as normalkeyboard[0].

Any ideas on how to do this?

Thanks