Javascript.RU

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

Вызвать значение из HTML тега с помощью класса
Так как я реально чайник.
Объясните возможно ли извлечь значение с помощью класса?

Дело в следующем, я хочу сделать виртуальную клавиатуру таким образом:

<div id="display"></div>

<div id="KeyQ" class="key" value="Q">Q</div>
<div id="KeyW" class="key" value="W">W</div>
<div id="KeyE" class="key" value="E">E</div>


Я могу вывести буквы в тег с идентификатором #display таким образом с помощью идентификатора:
KeyQ.onclick = function() {
document.getElementById("display").innerHTML = "Q";
}

Но таким образом придётся каждому создавать отдельное событие, таким образом код палучится бесконечным.

Я бы хотел вместит все действие в одну функцию используя клас "key" и брат значение у того элемента который был задиствован.
По своей логике сделал так но получаю undefined:
key.onclick = function() {
var val = document. querySelector(".key").value;
document.getElementById("display").innerHTML = val;
}

Может с помощью this который я не понял как он вообще работает или другой метод.
Ответить с цитированием
  #2 (permalink)  
Старый 27.04.2017, 15:45
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<style>
#display {
    height:20px;
}
.key {
   display:inline-block;
   border:1px solid black;
}
</style>
<div id="display"></div>
<div id="keys">
   <div id="KeyQ" class="key">Q</div>
   <div id="KeyW" class="key">W</div>
   <div id="KeyE" class="key">E</div>
</div>
<script>
document.getElementById("keys").onclick = function(e) {
   if (e.target != e.currentTarget) { document.getElementById("display").innerText += e.target.innerText; }
}
</script>

Последний раз редактировалось Dilettante_Pro, 28.04.2017 в 17:16.
Ответить с цитированием
  #3 (permalink)  
Старый 28.04.2017, 16:20
Новичок на форуме
Отправить личное сообщение для Amilo Посмотреть профиль Найти все сообщения от Amilo
 
Регистрация: 27.04.2017
Сообщений: 7

Сообщение от Dilettante_Pro Посмотреть сообщение
<style>
#display {
    height:20px;
}
.key {
   display:inline-block;
   border:1px solid black;
}
</style>
<div id="display"></div>
<div id="keys">
   <div id="KeyQ" class="key">Q</div>
   <div id="KeyW" class="key">W</div>
   <div id="KeyE" class="key">E</div>
</div>
<script>
document.getElementById("keys").onclick = function(e) {
   document.getElementById("display").innerText += e.target.innerText;
}
</script>
Идея хорошая но проблема в том что если нажать на DIV с идентификатором keys он выводит весь существующий в ном текс.
Ответить с цитированием
  #4 (permalink)  
Старый 28.04.2017, 16:34
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Здесь нужна проверка источника события. Можно проверять по имени класса, а можно кнопки сделать к примеру элементами SPAN и проверять имя тега. И если условие выполняется, только тогда принимать ввод.
Ответить с цитированием
  #5 (permalink)  
Старый 28.04.2017, 17:18
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Amilo,
Добавил проверку по рекомендации laimas
Ответить с цитированием
  #6 (permalink)  
Старый 28.04.2017, 17:29
Новичок на форуме
Отправить личное сообщение для Amilo Посмотреть профиль Найти все сообщения от Amilo
 
Регистрация: 27.04.2017
Сообщений: 7

Спасибо вам вот теперь то что надо
Ответить с цитированием
  #7 (permalink)  
Старый 28.04.2017, 17:32
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Dilettante_Pro,
currentTarget не все гладко с поддержкой.
Ответить с цитированием
  #8 (permalink)  
Старый 28.04.2017, 17:41
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

laimas,
В Internet Explorer с 6 по 8 ? Это актуально?
По мобильным - да.
(на смартфоне в Хроме под Андроидом работает)
Но ТС только начинает тему - у него еще много проблем появится

Последний раз редактировалось Dilettante_Pro, 28.04.2017 в 17:50.
Ответить с цитированием
  #9 (permalink)  
Старый 28.04.2017, 17:47
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Да вроде бы и в Сафари не все Ок, или уже есть поддержка?
Ответить с цитированием
  #10 (permalink)  
Старый 28.04.2017, 17:52
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

laimas,
Вроде нету - проверить не могу, у меня надкушенных яблок нету. Дома вечером у жены отберу - гляну.
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как ссылки из меню «Выберите модель» поставить с помощью тега <a> Werwolf23188 Общие вопросы Javascript 10 16.12.2013 22:05
как получить значение ид-а, из текушего хтмл тега dadli Общие вопросы Javascript 2 28.01.2012 15:16
Получить значение ячейки с помощью onclik Space-06 Events/DOM/Window 4 10.01.2012 09:39
Как получить значение title с помощью js? faforty Общие вопросы Javascript 4 25.08.2011 18:47
Значение тега Input Zilog jQuery 4 12.07.2010 06:12