Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.11.2017, 16:10
Аспирант
Отправить личное сообщение для Djambulat Посмотреть профиль Найти все сообщения от Djambulat
 
Регистрация: 27.04.2017
Сообщений: 79

Привязка переменных к каждому элементу
Здравствуйте.
Сверстать клавиатуру и выводить на определенную область вводимые буквы после клика. Мне к каждой букве на клавиатуре нужно дать переменную... Подскажите как это сделать? Хотя бы дайте правильно начать, чтобы не тратил в пустую времени
Ответить с цитированием
  #2 (permalink)  
Старый 23.11.2017, 16:13
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,943

Сообщение от Djambulat
Мне к каждой букве на клавиатуре нужно дать переменную..
Зачем?

Не проще делегировать обработчик события click ближайшему родителю каждой кнопки?
Ответить с цитированием
  #3 (permalink)  
Старый 23.11.2017, 16:15
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,943

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

Последний раз редактировалось Nexus, 23.11.2017 в 16:23. Причина: Не в кассу
Ответить с цитированием
  #4 (permalink)  
Старый 23.11.2017, 16:19
Аспирант
Отправить личное сообщение для Djambulat Посмотреть профиль Найти все сообщения от Djambulat
 
Регистрация: 27.04.2017
Сообщений: 79

Это Ангуляр?
Ответить с цитированием
  #5 (permalink)  
Старый 23.11.2017, 16:23
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,943

Djambulat, прошу прощения за невнимательность, это javascript
Ответить с цитированием
  #6 (permalink)  
Старый 23.11.2017, 16:32
Аспирант
Отправить личное сообщение для Djambulat Посмотреть профиль Найти все сообщения от Djambulat
 
Регистрация: 27.04.2017
Сообщений: 79

Ничего)) А с ангуляром не сможешь?
Ответить с цитированием
  #7 (permalink)  
Старый 23.11.2017, 16:34
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,943

Djambulat, к сожалению нет.
Ответить с цитированием
  #8 (permalink)  
Старый 23.11.2017, 18:06
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,833

Мой "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, 18:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,906

"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>
Ответить с цитированием
  #10 (permalink)  
Старый 24.11.2017, 10:59
Аспирант
Отправить личное сообщение для Djambulat Посмотреть профиль Найти все сообщения от Djambulat
 
Регистрация: 27.04.2017
Сообщений: 79

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как присвоить каждому элементу списка различную задержку анимации? imhateb Events/DOM/Window 3 07.08.2017 09:22
Прошу помочь, при скроле каждому элементу добавляется инициализация mitrich38 Events/DOM/Window 2 05.07.2016 23:47
jQuery UI widget и привязка более одного инстанса к элементу LabMapDo jQuery 2 11.09.2014 12:03
Привязка к элементу при перетаскивании tai jQuery 9 05.11.2013 09:45
AddClass к каждому первому элементу myocean jQuery 7 03.02.2013 12:44