Javascript - Как вы установите значение кнопки с элементом из массива?

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

Это небольшой пример выше, но я в основном делаю экранную клавиатуру, и у меня уже есть цикл, который позиционирует кнопки, однако в моем цикле я пытаюсь назначить значение каждой клавиши аналогично приведенному выше коду, но вместо печати qwerty для каждой клавиши, она печатает клавишу [row][col] для каждой кнопки. Как заставить буквы появляться на кнопке способом, аналогичным описанному выше?

Источник

3 ответа

Решение

Приведенный ниже код генерирует раскладку клавиатуры, которую вы ожидаете:

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

введите описание изображения здесь

Единственное, что второй и третий ряд должен немного сдвинуть вправо, чтобы выглядеть как настоящая клавиатура. Для этого мы можем сделать отступы для тегов div. Надеюсь, это поможет вам.

Источник

Что-то вроде этого?

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];

Это основная идея. У вас уже есть цикл для работы. Javascript должен быть после HTML на странице. Ваши элементы должны существовать, прежде чем вы сможете их захватить. Не уверен, что это именно ваше замешательство.

Вы можете использовать javascript для создания элементов, но если нет причин для этого, вы можете написать HTML. Если вы используете функцию javascript для генерации элементов, а также для заполнения их значений, вам понадобится javascript 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);

Включение его в функцию также позволит вам повторно использовать код с различными раскладками клавиатуры, если вы хотите, скажем, позволить пользователю выбирать другую раскладку на лету.

Источник

Вам нужно будет установить их программно, а не в атрибуте значения.

Вам также понадобится программно создать элементы tr / td / input в вашем цикле, например:

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

Когда вы создаете тег ввода программно, вы можете установить атрибут значения с помощью javascript - например,

newInput.setAttribute("value", key[rowIndex, cellindex]);
Источник
Другие вопросы по тегам