Javascript read 3 data ->print realtime db firebase

Viewed 73

Can anyone tell me how to make the print button I click match the data in the table?, for the data in the table using a realtime database. Of the three buttons it always reads the first data. Please help, thank you. this is a table image.

This is the data that always comes out even though I click print in the second or third data.

realtimedb.

this is my html

    <table class="table" >
    <thead id="root">
        <th>No</th>
        <th>nama</th>
        <th>tempatlahir</th>
        <th>tanggallahir</th>
        <th>alamat</th>
        <th>action</th>
        <iframe src="suratsktm.html" name="frame" style="display: none;"></iframe>        
    </thead>

    <tbody>
    </tbody>
</table>

db and read data for table javascript

var firebaseConfig = {
};
firebase.initializeApp(firebaseConfig);

var firebaseRef = firebase.database().ref("FormSktm");          
firebaseRef.once("value", function(snapshot){
    var stdNo = 0;
    snapshot.forEach(function(element){
        
        document.getElementById('root').innerHTML +=`
            <div>
                <td> ${innerHTML = ++stdNo}</td>
                <td>${element.val().nama}</td> 
                <td>${element.val().tempatlahir}</td> 
                <td>${element.val().tanggallahir}</td>
                <td>${element.val().alamat}</td>
                <td><input type="button" onclick="frames['frame'].print()" value="print"></td> 
             </div>`
     });
 })

and this is the page to print

  <ul >
            <div id="logo_surat">logo </div>
            <div id="nomer_surat">
            <div class="nama_surat">Surat Keterangan Tidak Mampu</div>
            <div>Nomor : </div>
            </div>
            <div id="surat_pembuka">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Yang bertanda tangan dibawah ini , 
            Kepala Desa , 
            Kecamatan, Kabupaten menerangkan dengan 
            sebenarnya bahwa orang tersebut dibawah ini :
            </div>
            <div class="content_surat">

            <div>
                <label>Nama
                </label>
                <label id="namaSktm" class="isian_surat"></label></div>
            <div>
                <label>Tempat lahir 
                </label>
                <span id="ttlSktm" class="isian_surat"></span></div>
            <div>
                <label>Tanggal lahir
                </label>
                <label id="tglSktm" class="isian_surat"></label></div>
            <div>
                <label>Alamat
                </label>
                <label id="alamatSktm" class="isian_surat"></label></div>
            
            </div>
            <div id="surat_penutup">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Demikian Surat Keterangan ini diberikan, untuk 
            dapat digunakan sebagaimana mestinya.</div>
            <div id="tanda_tangannya">ttd disini</div>
        </ul>
0 Answers
Related