Привязка переменных к каждому элементу
Здравствуйте.
Сверстать клавиатуру и выводить на определенную область вводимые буквы после клика. Мне к каждой букве на клавиатуре нужно дать переменную... Подскажите как это сделать? Хотя бы дайте правильно начать, чтобы не тратил в пустую времени |
Цитата:
Не проще делегировать обработчик события click ближайшему родителю каждой кнопки? |
<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, прошу прощения за невнимательность, это javascript :)
|
Ничего)) А с ангуляром не сможешь?
|
Djambulat, к сожалению нет.
|
Мой "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>
|
"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>
|
Спасибо. А как прописать кнопку backspace, чтобы удаляла последнюю букву?))
|
| Часовой пояс GMT +3, время: 12:11. |