When pressing button to trigger event nothing happens-CodePudding

I have a button that has a data-id with a value of 1. I need to pass this id to getCarDetails.php during a fetch() call. The getCarDetails needs this id for a query. The php is working fine as I tested it on a normal submit form and returns the jSON I need. However, this script doesn't want to work. I've tried everything.

                <div class="car-item">
                    <div class="row">
                        <p>Ford Fiesta</p>
                    </div>

                    <div class="row">
                        <button type="button" class="btn" data-id="1">View</button>
                    </div>
                </div>

function loadCarDetails(event) {
    const id = event.currentTarget.getAttribute("data-id");
    const data = new FormData();
    data.append("car_id", id);
    fetch("getCarDetails.php", {
        method: "POST",
        data
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error ${response.status}`);
        }
        return response.json();
    })
    .then(carDetails => {
        // ...use the car details here...
    })
    .catch(error => {
        // ...handle/reject error here...
    });
}

CodePudding user response：

Since your buttons are dynamically generated, they need an additional class that you can identify:

<button type="button" class="btn btnview" data-id="1">View</button>

Then, add an event listener for them at the end of the javascript:

document.querySelectorAll('.btnview')
    .forEach((e, i) => e.addEventListener('click', loadCarDetails));

This means that when the user clicks one of the buttons, it would call the loadCarDetails function for that button.

CodePudding user response：

You're not passing that function in a callback on the event handler of the button

               <div class="row">
                    <button type="button" onClick={(e) => loadCarDetails(e)}  data-id="1">View</button>
                </div>