Как изменять значения в объекте класса через input?

Question

[Atljh0987]

<div id="box"></div>
<input id="changer" type="number" value ='3'>

class Changer {
  constructor(t) {
    this._init(t);
  }
  
  _init(t) {
    let el = document.createElement('h3');
    let cont = document.querySelector('#box');
    el.innerHTML = t;
    cont.append(el);
  }
}

let val = document.querySelector('#changer').value;
let g = new Changer(val);

Что лучше добавить, чтобы при изменении значения #changer динамически менялось значение элемента h3?

Answer 1

[Александр]

Надо отслеживать изменения в input'е.

- let val = document.querySelector('#changer').value;
+ let val = document.querySelector('#changer');

let el = document.createElement('h3');
let cont = document.querySelector('#box');
t.addEventListener('input', () => {
    el.textContent = t.value;
});
el.textContent = t.value;
cont.append(el);

Answer 2

[StiflerProger]

Как вариант https://jsfiddle.net/sc6w39kr/4/

Answer 3

[Роман]

Нам не к чему перестраивать DOM, если точно знаем что будет элемент h3.
Можно вот так попробовать.

<div id="box">
      <h3 id="h3" />
    </div>
    <input id="changer" type="number" oninput="foo(this.value)">
    <script>
      function foo(value) {
        h3.textContent = value
      }
    </script>