what is the solution when the data printed in javascript only appears half of the selected data?-CodePudding

I made a voting application that when selected 13 candidates were immediately printed, but when it was printed only half whose data was printed

this is part of the print view

<div id="view" style="width: 100%; height: 100%; position: fixed; top: 0; left: 0; visibility: hidden;">
            <div id="page" style="background-color: rgb(223, 223, 223); padding: 50px;">
            </div>
        </div>

this is part of the form view of the options

<div id="daftar" >
                <form action="/pilihCalon" method="POST" > 
                    @csrf   
                    @foreach ($calon as $item)
                        <div >
                            <input type="hidden" name="id" value="{{$pemilih->id}}">
                            <div >
                                <div >
                                    <input onchange="inputPilihan('{{$item->id}}', '{{$item->nama}}', '{{$item->jabatanSebelum}}', '{{$item->daerahAsal}}', '{{$item->noCalon}}')"  type="checkbox" name="daftar_calon_id[]" value="{{$item->id}}">
                                </div>
                                <div >
                                    <img src="{{ asset('storage/daftarCalon/'.$item->foto) }}">
                                </div>
                                <div >{{$item->nama}}</div> 
                            </div>
                        </div>
                    @endforeach
                    <button id="btn" onclick="cetak();"  type="submit">Selesai</button>
                </form>    
        </div>

this is part of the print function ` var pilihan = [];

        function inputPilihan (id, nama, jabatanSebelum, daerahAsal, noCalon) {
            // pilihan[id] = [nama, jabatanSebelum, daerahAsal, noCalon];
            pilihan[id] = {nm : nama, jabatan : jabatanSebelum, daerah : daerahAsal, no : noCalon};
        }

        function cetak() {
            document.getElementById('daftar').style.visibility = "hidden";
            document.getElementById('view').style.visibility = "visible";
            document.getElementById('page').innerHTML = '';
            pilihan.forEach(element => {
                document.getElementById('page').innerHTML  = '<div style="display: inline-flex;"><div><p style="text-align: center;">' element.nm '</p>';
                document.getElementById('page').innerHTML  = "<p>" element.jabatan "</p>";
                document.getElementById('page').innerHTML  = "<p>" element.daerah "</p></div>";
                document.getElementById('page').innerHTML  = "<div style='text-align: right; style='font-size: 64px; font-weight: 800; padding: 10px; background-color: rgb(235, 235, 235); margin: 0px 0px 20px 30px;'>" element.no "</div></div>";
            });
            print(document.getElementById('page').innerHTML);

        }
        

    </script>

hopefully find a solution to the problem

CodePudding user response：

try to delete the position fixed section, top = 0, left = 0 and the height so the value is 0.

like this

<div id="view" style="width: 100%; height: 0; visibility: hidden;">
        <div id="page" style="padding: 50px;">
        </div>
    </div>

add this in the print function

document.getElementById('daftar').style.height = "100%";

CodePudding user response：

It seems that the problem is that only half of the selected data is being printed in the JavaScript print function. One possible solution to this issue could be to check that all of the selected data is being added to the "pilihan" array correctly before it is being printed. You can add a console.log statement to the "inputPilihan" function to check if the data is being added correctly to the array.

Another possible solution could be to check that the print function is being called correctly and that the correct element is being passed to the print function.

You can also check if the HTML element with id "page" exists in your DOM and if it does then try to debug the forEach loop you have in cetak() function and see if the loop is running and printing the correct data.

Finally, you can try to inspect the page with browser developer tools and see if there is any error or missing element.