JavaScript 表未显示在屏幕上

Question

您好，我正在尝试创建一家小商店，但我的购物车似乎无法正常工作。我希望用户能够按下购物袋图标并获得购物车中物品的列表。如果他们愿意，他们可以将对象从购物车中删除。但是，我被卡住了，因为它不会将商品加载到购物车中。有人能帮我理解我做错了什么吗？

js：

    function showWinkelmandje() {
        console.log("winkelmandje.onclicked;");
        console.log(document.getElementById("winkelmandje_knop"));
        //Winkelmandje aan- of uitzetten
        if(document.getElementById("winkelmandje_knop").checked) {
            document.getElementById("winkelmandje").style.visibility = "visible";
            document.getElementById("rijen").style.visibility = "visible";
        }else{
            document.getElementById("winkelmandje").style.visibility = "hidden";
            document.getElementById("rijen").style.visibility = "hidden";
        }
        var rijen = "<table><th>Titel</th><th>Artiest</th>" + "<th>Genre</th><th>Prijs</th><th>Aantal</th><th>Delete</th>";
        var rij = "";
        var lus = document.getElementById("lus").value;
        for(var x=0; x<lus; x++) {
            if(document.getElementById("aantal["+ x +"]").value==0) continue;
            rij="<tr>";
            titel = document.getElementById("titel["+ x +"]").value;
            artiest = document.getElementById("artiest["+ x +"]").value;
            genre = document.getElementById("genre["+ x +"]").value;
            prijs = document.getElementById("prijs["+ x +"]").value;
            aantal = document.getElementById("aantal["+ x +"]").value;
            rij += "<td width='120'>" + titel + "</td>" + 
                    "<td>" + artiest + "</td>" +
                    "<td>" + genre + "</td>" +
                    "<td>" + prijs + "</td>" +
                    "<td>" + aantal + "</td>" +
                    "<td onclick='deleterij(" + x + ");'>&#10008;</td></tr>";
            rijen += rij;
        }
        rijen += "</table";
        document.getElementById("rijen").innerHTML =  rijen;
    }
    function deleterij(id){
        verwijder = confirm("Wil je " + document.getElementById("titel[" +id+"]").value + " verwijderen?");
        if(verwijder) {
            document.getElementById("aantal["+ id + "]").value = 0;
            showWinkelmandje();
        }
    }


php:

    <?php 
    if(!isset($_SESSION["ID"])&&($_SESSION["STATUS"]!="ACTIEF")) {
        echo "<script>alert('U heeft geen toegang tot de pagina'); location.href='../index.php';</script>";
    }
    ?>
    <!-- dit is het zoek formulier -->
<!-- this is where the searchbar is -->
    <script src="js/webshop.js"></script>
    <div class="content">
        <form name="search" id="search" action="" method="POST">
            <div style="background-color: #C2F98E; height: 25px; margin-top: 5%; padding: 0;">
            <input type="text" style="float: left; width: 70%;" id="patroon" name="patroon" placeholder="Zoek albums"/>
            <input type="submit" style="float: none; width: 10%; font-size: 1.2rem;" id="zoeken" value="&#128269;" /><br>
            </div>
        </form>
    </div>
    <?php
    // this is where I'm trying to make the search bar dynamic however it doesnt seem to want to search my albums
        //Hier wordt de sql opdracht gegenereerd
        if(isset($_POST["zoeken"])&& !empty($_POST["patroon"])) {
            $patroon = htmlspecialchars($_POST["patroon"]);
            $sql = "SELECT * FROM album WHERE titel LIKE '%$patroon%' || artiest LIKE '%$patroon%' || genre LIKE '%$patroon%'";
        }else{
            $sql = "SELECT * FROM album LIMIT 3";
        }
    ?>
    <div class="content">
    <form name="webshop" id="webshop" action="index.php?page=bestellen" method="POST">
    <?php
    // Dit is het bestel formulier met albums uit de db
        $stmt = $verbinding->prepare($sql);
        $stmt->execute();
        $albums = $stmt->fetchAll(PDO::FETCH_ASSOC);
        $lus = 0;
        foreach($albums as $album) {
            echo "<img width='100px' src='img/". $album['cover']."'/>";
            echo "<input type='hidden' name='id[$lus]' id='id[$lus]' value'".$album['ID']. "' />";
            echo "<input type='hidden' name='titel[$lus]' id='titel[$lus]' value'".$album['titel']. "' />";
            echo "<input type='hidden' name='artiest[$lus]' id='artiest[$lus]' value'".$album['artiest']. "' />";
            echo "<input type='hidden' name='genre[$lus]' id='genre[$lus]' value'".$album['genre']. "' />";
            echo "<input type='hidden' name='prijs[$lus]' id='prijs[$lus]' value'".$album['prijs']. "' />";
            echo "<br> titel:". $album["titel"] . "prijs: " . $album["prijs"];
            echo "<br> Voorraad:". $album["voorraad"];
            echo "<br>Aantal:";
            echo "<input class='aantal' type='text' style='width: 10%; name='aantal[$lus]' id='aantal[$lus]' value='0' />";
            echo "<hr />";
            $lus++;
    
        }
        echo "<input type='hidden' name='lus' id='lus' value'".$lus."'/>";
    ?>
<!-- this is the shooping cart-->
    <!--winkelmandje aan- en uitzetten -->
    <input type="checkbox" name="winkelmandje_knop" id="winkelmandje_knop" onclick="javascript:showWinkelmandje();" class="icon" value=&#128717;/>
    <label for="winkelmandje_knop">&#128717;</label>
    <br>
        <div class="icon_container">
            <input type="submit" class="icon" id="submit" name="submit" value="&rarr;" />
        </div>
    <br>
    </form>
    </div>
    <!--winkelmandje-->
    <div id="winkelmandje">
         <div id="rijen"></div>
         <input type="checkbox" id="winkelmandje_knop" onclick="javascript:showWinkelmandje();" class="icon" value="X" />
         <label for="winkelmandje_knop" style="color: red;">&#8861;</label>
     </div>
    </body>
    </html>

其他信息

正如你在这里看到的，它没有显示表格信息