JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<form id = "frm1" >
        name : <input type = text id = "name">
        age :  <input type = text id = "age">
        class : <input type = text id = "clas">
        <button onclick="add(event)">add</button>
        <button onclick="show(event)">show</button>
        <button onclick="clear(event)">clear</button>
    </form><br>
    <p id = "data"></p>

JavaScript

var records = new Array();
var counter = 0;
var t = document.getElementById("data");

function record(name,age,cla) {
    this.name=name;
    this.age=age;
    this.cla=cla;
}

function add(event){
    event.preventDefault();
    var r1 = new record(frm1.name.value,frm1.age.value,frm1.clas.value);
    records.push(r1);
}

function show(event){
    event.preventDefault();
    for (var i=counter;i<records.length;i++,counter++) {
        t.innerHTML+= records[i].name+"    "+records[i].age+"       "+records[i].cla+"<br>";
    }
}

function clear(event) {
    event.preventDefault();
    t.innerHTML="";
    counter=0; 
}