JSFiddle - React, Tailwind, and code Playground

by Dong Nguyen

HTML

<script src="https://cdn.jsdelivr.net/polyfills/polyfill.js+obs"></script>
    <div class="block">
        <input type="text" id="txtFirstName" value="" />
        <input type="text" id="txtLastName" value="" />
    </div>

<button id="btnPeople">View people's properties</button>

CSS

.block{
    margin-bottom: 20px;
}

JavaScript

var people = {
    		firstName: "Dong",
    		lastName: "Nguyen"
    }
    
    
    var element = function(id){
         return document.getElementById(id);   
    }

    var $firstName = element('txtFirstName');
    var $lastName = element('txtLastName');
    
    var render = function(){
         $firstName.value = people.firstName;
         $lastName.value = people.lastName;
    }
    
    render();


  function domToObject(source, target, attribute){
      source.onchange = function(){
          var v = source.value+'';
          target[attribute] = v;
      }
	}

 domToObject($firstName, people, 'firstName');
 domToObject($lastName, people, 'lastName');


function viewPeople(){
    alert([
        'people.firstName: '+people.firstName, 
        'people.lastName: '+people.lastName
   ].join("\n"));
}

var $btnPeople = element('btnPeople');
$btnPeople.onclick = viewPeople;