Форум

Djambulat · #1 (**permalink**) 23.11.2017, 17:10

Здравствуйте.
Сверстать клавиатуру и выводить на определенную область вводимые буквы после клика. Мне к каждой букве на клавиатуре нужно дать переменную... Подскажите как это сделать? Хотя бы дайте правильно начать, чтобы не тратил в пустую времени

Nexus · #2 (**permalink**) 23.11.2017, 17:13

Сообщение от Djambulat

Мне к каждой букве на клавиатуре нужно дать переменную..

Зачем?

Не проще делегировать обработчик события click ближайшему родителю каждой кнопки?

Nexus · #3 (**permalink**) 23.11.2017, 17:15

<div id="result"></div>
<div id="keyboard">
<span>q</span>
<span>w</span>
<span>e</span>
<span>r</span>
<span>t</span>
<span>y</span>
</div>
<script>
document.querySelector('#keyboard').addEventListener('click',function(event){
    if(this!==event.target)
        document.querySelector('#result').innerHTML+=event.target.innerHTML;
});
</script>

Djambulat · #4 (**permalink**) 23.11.2017, 17:19

Это Ангуляр?

Nexus · #5 (**permalink**) 23.11.2017, 17:23

Djambulat, прошу прощения за невнимательность, это javascript

Djambulat · #6 (**permalink**) 23.11.2017, 17:32

Ничего)) А с ангуляром не сможешь?

Nexus · #7 (**permalink**) 23.11.2017, 17:34

Djambulat, к сожалению нет.

Dilettante_Pro · #8 (**permalink**) 23.11.2017, 19:06

Мой "Hello World!"

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body>
   <main ng-controller="AppController">
    <div >{{ inputstring }}</div>
    <div>
      <span ng-click="getLetter('q')">q</span>
      <span ng-click="getLetter('w')">w</span>
      <span ng-click="getLetter('e')">e</span>
      <span ng-click="getLetter('r')">r</span>
      <span ng-click="getLetter('t')">t</span>
      <span ng-click="getLetter('y')">y</span>
    </div>
   </main>
<script>
(function() {

  'use strict';

  angular
  .module('app', [])

   .controller('AppController', ['$scope', function($scope) {
       $scope.getLetter = function(letter) {
           $scope.inputstring = ($scope.inputstring?$scope.inputstring:"") +  letter ;
       };
  }]);

})();
</script>
</body>
</html>

рони · #9 (**permalink**) 23.11.2017, 19:38

"Hello World!" дубль два

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body>
   <main ng-controller="AppController">
    <div >{{ inputstring }}</div>
    <div>
      <span ng-repeat='b in letter' ng-click="getLetter(b)"> {{b}}</span>
    </div>
   </main>
<script>
(function() {
  'use strict';
  angular
  .module('app', [])
   .controller('AppController', ['$scope', function($scope) {
       $scope.letter = 'qwerty';
       $scope.inputstring = "";
       $scope.getLetter = function(letter) {
            $scope.inputstring += letter ;
       };
  }]);

})();
</script>
</body>
</html>

Djambulat · #10 (**permalink**) 24.11.2017, 11:59

Спасибо. А как прописать кнопку backspace, чтобы удаляла последнюю букву?))

Форум

Справочник

Discord чат

Курсы javascript