0
<html>
<body>
<script type="text/javascript">
    var key = [["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"]];
</script>
<table>
    <tr>
       <td><input type = 'button' value = "key[0][1]" /></td>;
    </tr>
</table>
</body>
</html>

This is a small example above, but I'm basically making an onscreen keyboard and I already have the loop which positions the buttons, however in my loop I try to assign the value of each key similarly to the code above, but instead of printing q w e r t y for each key, it prints key[row][col] for each button. How do I get the letters to appear on the button using a similar method to the above?

jellybean_232
  • 189
  • 1
  • 4
  • 16
  • You will have to set the values dynamically with javascript or create them from scratch with javascript. There is no html attribute that will automatically read a javascript variable and set its value. – km6zla Nov 19 '13 at 00:41

3 Answers3

3

The below code generates the keyboard kind of layout that you are expecting:

<html>
<head>
<script type="text/javascript">
var key = [["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"]];
</script>

<body>
<script type="text/javascript">
for(var i = 0; i < key.length; i++)
{
    document.write("<div>");
    for(var j = 0; j < key[i].length; j++)
    {
       document.write("<input type='button' value='" + key[i][j] + "'/>");
    }
    document.write("</div>");
}
</script>
</body>
</html>

enter image description here

The only thing the second and third row should move right a little bit to look like real keyboard. For this we can do padding for the div tags. Hope this helps you.

Santhosh Gutta
  • 346
  • 2
  • 5
  • Thank you for this! I realized the only thing I needed to add were the speech marks in (""). I never even thought of concatenating it. Thanks for that =) – jellybean_232 Nov 19 '13 at 01:03
  • 1
    Never use `document.write`! See the warning in http://www.w3.org/TR/2011/WD-html5-20110525/apis-in-html-documents.html#document.write – Oriol Nov 19 '13 at 01:20
1

Something like this?

HTML:

<input id="myInput" type="button" />

JavaScript:

var key = [["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 input = document.getElementById('myInput');
input.value = key[0][1];

That's the basic idea. You already have a loop to work with. The javascript should be after the HTML on the page. Your elements need to exist before you can grab them. Not sure if this is your precise confusion, though.

You can use javascript to create the elements, but unless there's a reason to do so, you might as well write HTML. If you're using a javascript function to generate the elements as well as fill their values in, you'll need javascript's document.createElement:

var keysArr = [["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 generateKeys = function(keys) {

  for (var i = 0 ; i < keys.length ; i++) {

    for (var j = 0 ; j < keys[i].length ; j++) {

      var input = document.createElement('input');
      input.value = key[i][j];
      document.appendChild(input); // or put it wherever you need to.

    }
  }
}

generateKeys(keysArr);

Wrapping it in a function will also allow you to re-use the code with different keyboard layouts if you wanted to, say, let the user choose a different layout on the fly.

wulftone
  • 1,628
  • 1
  • 18
  • 34
0

You will need to set them programmatically, rather than in the value attribute.

You will also need to create the tr/td/input elements within your loop programmatically, for example:

http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

When you create the input tag programmatically, you can set the value attribute using javascript - eg. 

newInput.setAttribute("value", key[rowIndex, cellindex]);
Oriol
  • 274,082
  • 63
  • 437
  • 513
Brendan Hill
  • 3,406
  • 4
  • 32
  • 61