Getters Setters (Pure JS)

Reactive input using getters and setters with pure javascript (no frameworks)

by Roland Doda

HTML

<input 
    type="text"
    id="full_name"
    oninput="add_full_name(event.target.value)"
    placeholder="Type full name"
  />

  <div id="output"></div>

JavaScript

let output = document.getElementById("output");
let full_name_input = document.getElementById("full_name");
let created_person = {
  name: 'ROLAND',
  last_name: 'DODA',
  get full_name() {
    return `${this.name} ${this.last_name}`
  },
  set full_name(new_value) {
  	this.name = new_value.split(' ')[0] || ''
    
    let last_name = new_value.split(' ') || ''
    let [, ...rest] = last_name
    
    this.last_name = rest.join('')
  }
}

full_name_input.value = created_person.full_name
output_full_name()


function add_full_name (full_name) {
	created_person.full_name = full_name
  output_full_name()
}

function output_full_name () {
	output.innerHTML = created_person.full_name
}