My first try to build an OO example with pure JS. MyInput groups three HTML Elemnts together. Initializing it with new MyInput('sometext') works as expected, but not inp = new MyInput(); inp.header = 'other text'.
I tried to create a setter method but this fails saying 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>Simply moving the critical line this.header = header after this.h2 = h2 did it!
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>