Cara sederhana membuat mesin genertor html

Salah satu fungsi javascript yang sangat penting adalah kemampuannya mengambil nilai dari suatu input dan menjadikannya sebagai nilai dari sebuah variable. Nilai ini sendiri dapat dijadikan sebagai patokan utama untuk membangun grid. Bagaimana caranya?

Tulisan ini akan mencoba membahas implementasi itu yaitu tentang cara sederhana membuat mesin generator html. Kebetulan bahasan kemarin tentang kotak yang berubah warna saat di klik, agar lebih terarah maka hasil dari mesin generator kita juga berupa kotak-kotak warna kuning.

Dasar Pengetahuan: memanggil value input
Untuk dapat menangkap input value kita dapat memanggil id maupun class dari elemen input diikuti dengan penangkapan value-nya.

Syntax

document.getElementById("idDariInput").value;

 <input type="text" id="inputvalue" value="ini isi dari input" />

Penangkapan value dari input di atas dapat dilakukan dengan cara

 var coba = document.getElementById("inputvalue").value;

 document.write(coba);

Dasar Pengetahuan: property innerHTML

Dengan innerHTML kita dapat mengganti teks pada sebuah element yang sudah ada sebelumnya, bahkan dengan properti ini pula kita dapat membuat (generate) satu set dokumen html secara utuh.

Syntax

sesuatu.innerHTML = "apapun";

Contoh Penggunaan

<!-- elemen yang hendak dimanipulasi -->
<div id="angel">ada</div>
<input type="button" value="coba" onclick="foo()"/>

<!-- Saat tombol diklik jalankan fungsi ini -->
<script type="text/javascript">
    function foo(){
      document.getElementById("angel").innerHTML = "tidak ada"; 
    }
</script>

Penerapan

Dari dua hal tersebut dan sedikit pemanfaatan looping kita dapat membuat mesin sederhana pembangun grid, dimana jumlah grid yang terbentuk sesuai dengan keinginan user.

Buat elemen html

<div id="cangkang">
    Jml Kolom: <input type="text" name="kolom" id="kolom"/>
    Jumlah Baris: <input type="text" name="baris" id="baris"/>
    <input type="button" value="Buat grid tts!" onclick='buatgrid();'/>
    <br /><br />
  
    <div id="aanops"><!-- hasil generate --></div>
</div>

Fungsi generator grid

function buatgrid(){
    var jmklm = document.getElementById('kolom').value;
    var jmbrs = document.getElementById('baris').value;
        
    var grid = '';
    for( var i=0; i<jmbrs;i++) 
    {
        grid += '<div id="kotakwrap">'; //tiap baris diapit oleh element dg id kotakwrap
        for( var j=0; j<jmklm;j++)
    {
      grid += '<div id="kotak"></div>'; 
    }
    
    grid += '</div>';
    grid += '<div style="clear:both;"></div>'; //menetralkan float: left;
  }
  
  document.getElementById('aanops').innerHTML = grid;
}

Atur tampilan grid melalui css

#cangkang {
    background: #444444;
    min-height: 200px;
    padding: 20px;
    color: white;
}

#cangkang > input[type="text"] {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    height: 20px;
    line-height: 25px;
    margin: 12.5px 0;
    vertical-align: middle;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
#cangkang > input[type="text"]:focus {
  border-color: rgba(82, 168, 236, 0.8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
    outline: 0 none;
}

#kotakwrap {
    width: 100%;
}

#kotak {
    background:white;
    width: 36px;
    height: 36px;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    float: left; /* melekatkan tiap kotak ke sisi kiri */
}

Hasil Akhir

Jml Kolom: Jumlah Baris: