html - Javascript - How do you set the value of a button with an element from an array? - Stack Overflow

<html><body><script type="textjavascript">var key = [["q",&quo

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

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

Share Improve this question asked Nov 19, 2013 at 0:37 jellybean_232jellybean_232 1891 gold badge4 silver badges16 bronze badges 1
  • 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 Commented Nov 19, 2013 at 0:41
Add a ment  | 

3 Answers 3

Reset to default 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>

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.

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.

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./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]);

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1742326387a4422836.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信