Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Javascript. Наследование метода, изменение / 6 сообщений из 6, страница 1 из 1
15.04.2017, 12:56
    #39439104
SQLPowerUser
SQLPowerUser
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Javascript. Наследование метода, изменение
Изучаю тонкости ООП в 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
| Ответить | Цитировать | Написать  
16.04.2017, 01:21
    #39439229
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Javascript. Наследование метода, изменение
#ниасилил

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

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

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

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

А вообще настоятельно советую не трогать интерфейс, а тренироваться на кошках на невизуальных объектах.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.04.2017, 02:25
    #39439233
hVostt
hVostt
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Javascript. Наследование метода, изменение
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, 03:00
    #39439235
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Javascript. Наследование метода, изменение
SQLPowerUserИзучаю тонкости ООП в Javascript
Уверен, что для начала неплохо было-бы прочитать эту небольшую статью: https://frontender.info/the-two-pillars-of-javascript/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.04.2017, 11:42
    #39439573
SQLPowerUser
SQLPowerUser
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Javascript. Наследование метода, изменение
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
| Ответить | Цитировать | Написать  
25.04.2017, 09:48
    #39443863
SQLPowerUser
SQLPowerUser
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Javascript. Наследование метода, изменение
Вариант через prototype , полная демо версия https://jsfiddle.net/9xqgLa4d/1/
Здесь работает событие onchange, можно при желании задавать поиск и т.д.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Javascript. Наследование метода, изменение / 6 сообщений из 6, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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