JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<p>Sandro</p>
<p>Andrea</p>
<p>Claudio</p>

<input type="text" placeholder="try surnames">

JavaScript

var Person = function(name, element){
    this.name = name;
    this.element = element;
    document.addEventListener('addsurname', this.addSurname.bind(this), false);
};

Person.prototype.addSurname = function(evt){
    this.element.textContent = this.name + " " + evt.detail.surname;
}

document.querySelector('input').addEventListener('input', function(){
    var evt = document.createEvent('CustomEvent');
    evt.initCustomEvent('addsurname', true, true, {surname: this.value});
    this.dispatchEvent(evt);
});

var p = document.querySelectorAll('p');
for(var x = 0; x < p.length; x++){
    new Person(p[x].textContent, p[x]);
}