ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Javascript. Наследование метода, изменение
6 сообщений из 6, страница 1 из 1
Javascript. Наследование метода, изменение
    #39439104
SQLPowerUser
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SQLPowerUser
Участник
Изучаю тонкости ООП в Javascript. В этом коде нем при щелчке по списку, копируется текст в вышестоящий input
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <title>События</title>
<style>
div, input {box-sizing:border-box; outline:none; width:150px;} .listBox, input {border:1px solid #ccc;} .listBox div:hover {background:#f0f0f0;}
</style>
</head>
<body>
<div id="s1">
  <input value="" readonly>
  <div class="listBox">
    <div>Автомобили</div> <div>Компьютеры</div> <div>Бытовая техника</div>
  </div>
</div>
<br>
<button onclick="getValue()">Прочитать value из объека</button>
<script>
function mySelect(idx) {
  var el = document.getElementById(idx);
  var inp = el.children[0], listBox = el.querySelector('.listBox');
  this.onChangeValue = listBox.onclick = function(e) {
    inp.value = e.target.textContent;
    console.log('сообщение из mySelect');
  }
  this.text = function() {return inp.value};
}

var s1 = new mySelect('s1');
function getValue() {console.log(s1.text());}//OK

var parentChange = s1.onChangeValue;
s1.onChangeValue = function(e) {// неудачная попытка
  parentChange.call(this);
  console.log('сообщение из внешнего мира');
};
</script>
</body>
</html>


Свойство text успешно вытаскивается из объекта через s1.text() . Хочется сделать нечто похожее и для метода onChangeValue ...
Вопрос: как сделать так, чтобы отловить изменение текста в input ?
Т.е. я щелкаю по элементу списка, и кроме фразы "сообщение из mySelect" должна появляться фраза "сообщение из внешнего мира"
...
Рейтинг: 0 / 0
15.04.2017, 12:56
| Ответить | Цитировать | Написать  
Javascript. Наследование метода, изменение
    #39439229
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
#ниасилил

могу только замечания по коду сказать:

1. Раз уж используете querySelector, то почему не inp = el.querySelector('input') ?

2. s1.onChangeValue() - у Вас не вызывается никогда.

3. Изменения в элементе input обрабатываются обработчиком события (on) change и другими,
но только не (on) click элемента класса .listBox ))

А вообще настоятельно советую не трогать интерфейс, а тренироваться на кошках на невизуальных объектах.
...
Рейтинг: 0 / 0
16.04.2017, 01:21
| Ответить | Цитировать | Написать  
Javascript. Наследование метода, изменение
    #39439233
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
SQLPowerUser,

ээм...

1. ты присваиваешь listBox.onclick некую функцию.
2. эту же функцию ты присваиваешь свойству onChangeValue объекта
3. потом ты создаешь объект s1 и меняешь ему значение свойства onChangeValue
4. с какого перепуга listBox.onclick должно поменяться? как указывала на изначальную функцию, так и продолжает указывать, независимо от каких-то подпрыгиваний.

Наверное ты хотел вот так:

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
function mySelect(idx) {
  var self = this; // добавил

  var el = document.getElementById(idx);
  var inp = el.children[0], listBox = el.querySelector('.listBox');
  self.onChangeValue = function(e) {
    inp.value = e.target.textContent;
    console.log('сообщение из mySelect');
  }
  listBox.onclick = function(e) { // отдельно задаётся
     if(typeof self.onChangeValue === 'function') {
        self.onChangeValue(e); // вызываем функцию, которая сидит в свойстве, её можно менять
     }
  }
  self.text = function() {return inp.value};
}



В целом, это не относится к ООП, ты просто заменил одну функцию на другую, ООП здесь не пахнет. Да и не уместен он в JavaScript в классическом понимании.
...
Рейтинг: 0 / 0
16.04.2017, 02:25
| Ответить | Цитировать | Написать  
Javascript. Наследование метода, изменение
    #39439235
Фотография бухалтер фантоцци
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бухалтер фантоцци
Участник
SQLPowerUserИзучаю тонкости ООП в Javascript
Уверен, что для начала неплохо было-бы прочитать эту небольшую статью: https://frontender.info/the-two-pillars-of-javascript/
...
Рейтинг: 0 / 0
16.04.2017, 03:00
| Ответить | Цитировать | Написать  
Javascript. Наследование метода, изменение
    #39439573
SQLPowerUser
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SQLPowerUser
Участник
hVostt,
спасибо, получилось.
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
function mySelect(idx) {
  var self = this;
  var el = document.getElementById(idx);
  var inp = el.querySelector('input'), listBox = el.querySelector('.listBox');
  self.onChangeValue = function(e) {
    inp.value = e.target.textContent;
  }
  listBox.onclick = function(e) {// отдельно задаётся
     if (typeof self.onChangeValue === 'function') {
        self.onChangeValue(e); // вызываем функцию, которая сидит в свойстве, её можно менять
     }
  }
  self.text = function() {return inp.value};
}

var s1 = new mySelect('s1');
var parentChange = s1.onChangeValue;
s1.onChangeValue = function(e) {
  parentChange.call(this, e);
  console.log('Выбрано:',s1.text());
};


бухалтер фантоцци,
статья хорошая, добавил в закладки.

З.Ы. в стандартом HTML есть список выбора <select> <option>. Я сделал аналог с поиском и прочей кастомизацией.
Не знал только как отловить событие onchange как у <select> <option>.
...
Рейтинг: 0 / 0
17.04.2017, 11:42
| Ответить | Цитировать | Написать  
Javascript. Наследование метода, изменение
    #39443863
SQLPowerUser
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SQLPowerUser
Участник
Вариант через prototype , полная демо версия https://jsfiddle.net/9xqgLa4d/1/
Здесь работает событие onchange, можно при желании задавать поиск и т.д.
...
Рейтинг: 0 / 0
25.04.2017, 09:48
| Ответить | Цитировать | Написать  
6 сообщений из 6, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Javascript. Наследование метода, изменение
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]