Mi primer intento de construir un ejemplo OO con JS puro. MyInput agrupa tres elementos HTML juntos. Inicializarlo con new MyInput('sometext') funciona como se esperaba, pero no inp = new MyInput(); inp.header = 'other text' .
Traté de crear un método setter pero esto falla al decir this.h2 undefined .
const root = document.querySelector('#root') const h1 = document.createElement('h1') h1.textContent = 'Just Testing' root.appendChild(h1) // guess = Math.floor( Math.random() * 100) // document.title = guess class MyInput { constructor(header) { this.header = header const h2 = document.createElement('h2') h2.textContent = this.header this.h2 = h2 this.div = document.createElement('div') const inp = document.createElement('input') inp.disabled = true inp.addEventListener('blur', (e)=>{ inp.disabled = true but.style.visibility = 'visible' } ) const but = document.createElement('button') but.textContent = 'unlock' but.addEventListener('click', ()=>{ but.style.visibility = 'hidden' inp.disabled = false inp.focus() }) this.div.appendChild(h2) this.div.appendChild(inp) this.div.appendChild(but) } // following line throws error this.h2 undefined set header (newHeader) {this.h2.textContent = newHeader} // ??? } const i1 = new MyInput('this works') root.appendChild(i1.div) const i2 = new MyInput() i2.header = 'this does not work?!?' root.appendChild(i2.div) <!DOCTYPE html> <html> <head> <meta charset='utf-8'> </head> <body> <div id='root'></div> <script src='test.js'></script> </body> </html>¡Simplemente moviendo la línea crítica this.header = header después de this.h2 = h2 lo logró!
console.log('yo!') document.title = 'hello world' const root = document.querySelector('#root') const h1 = document.createElement('h1') h1.textContent = 'Just Testing' root.appendChild(h1) class MyInput { constructor(header) { const h2 = document.createElement('h2') h2.textContent = header this.h2 = h2 this.header = header // <- this line moved this.div = document.createElement('div') const inp = document.createElement('input') inp.disabled = true inp.addEventListener('blur', (e)=>{ inp.disabled = true but.style.visibility = 'visible' } ) const but = document.createElement('button') but.textContent = 'unlock' but.addEventListener('click', ()=>{ but.style.visibility = 'hidden' inp.disabled = false inp.focus() }) this.div.appendChild(h2) this.div.appendChild(inp) this.div.appendChild(but) } set header (newHeader) {this.h2.textContent = newHeader} } const i1 = new MyInput('this works') root.appendChild(i1.div) const i2 = new MyInput() i2.header = 'and now this also works!' root.appendChild(i2.div) <!DOCTYPE html> <html> <head> <meta charset='utf-8'> </head> <body> <div id='root'></div> <script src='test.js'></script> </body> </html>