Here is how my anchors are displayed on the web. I need to get the value of the anchor and send it to another PHP file, so i would use the value of the anchor in my SQL query to give the condition to display all the productId associated with the value of the anchor

                       <?php
                        include"validations/connection.php";
                        $sql = "SELECT * from category ORDER BY CHAR_LENGTH(categoryName)";
                        $result = $conn->query($sql);

                        if ($result->num_rows > 0) {

                            echo'   
                                <div class="col-sm-12">
                                    <ul class="nav flex-column">
                            ';
                            while($row = $result->fetch_assoc()){
                                $id = $row['categoryId'];
                                $sqltwo = "SELECT COUNT(productId) AS num FROM products WHERE categoryId = '$id'";
                                $resultwo = $conn->query($sqltwo);
                                
                                while($rowtwo = $resultwo->fetch_assoc()){
                                    echo'
                                        <li class="nav-item">
                                            <button value="'.$row['categoryId'].'" class="link-show">'.$row['categoryName'].'</button> <span class="badge badge-danger ml-1">'.$rowtwo['num'].'</span>
                                        </li>
                                    ';
                                }
                            }
                            echo'
                                </ul><hr>
                            </div>
                            ';
                        }
                    ?>

And here is my JavaScript

<script>
    var id = document.querySelectorAll('.link-show').value;
    document.querySelectorAll('.link-show').forEach(item => {
        item.addEventListener('click', event => {
            var xhr = new XMLHttpRequest();
            xhr.open('GET','validations/retrievebycategory.php?id=' id, true);

            xhr.onload = function(){
                console.log(this.responseText);
            }
            xhr.send();
        })
    })

</script>

CodePudding user response：

    // Remove this, it's querying all links
    // var id = document.querySelectorAll('.link-show').value;
    document.querySelectorAll('.link-show').forEach(item => {
        item.addEventListener('click', event => {
            
            // In the event handler, "this" is set to event.currentTarget (the button, in this case).
            // Equivalent formulations:
            // let id = event.currentTarget.value; // (from event, standard behavior, equivalent to "this")
            // let id = event.target.value // (from event's initial target, equivalent in most cases, except if the "click" is generated by a nested element; generally unsafe to use unless the intent is clear)
            // let id = item.value; // (from closure)
            let id = this.value;
            
            var xhr = new XMLHttpRequest();
            xhr.open('GET','validations/retrievebycategory.php?id=' id, true);

            xhr.onload = function(){
                console.log(this.responseText);
            }
            xhr.send();
        })
    })

See modifications and explanations in the code