Custom HTML block, button is not clickable

ERPNext
1

I have created a Custom HTML Block and when i click on i,t it does not open or redirect to the expected page/doctype, you r support is certainly apprciated

image

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colorful Tile Button</title>
    <link rel="stylesheet" href="styles.css"> <!-- Link to external CSS -->
</head>
<body>
    <div id="custom-block">
        <div id="rooms-container"></div>
        <!-- Tile button for redirecting to purchase invoice -->
        <div id="tile-button" class="tile-button">Purchase</div>
    </div>

    <script src="script.js"></script> <!-- Link to external JavaScript -->
</body>
</html>

JavaScript

// Define the function to handle button click
function openPurchaseInvoice() {
    window.location.href = 'http://127.0.0.1:8000/app/purchase-invoice/new-purchase-invoice'; // Replace with the actual URL
}

// Add event listener to the button after DOM content is loaded
document.addEventListener('DOMContentLoaded', () => {
    const button = document.querySelector('#tile-button');
    if (button) {
        button.addEventListener('click', "Purchase Invoice");
    } else {
        console.error('Button with ID "tile-button" not found.');
    }
});

CSS

/* Tile button styles */
.tile-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background-color: #4CAF50; /* Green background */
    color: white;
    height: 100px;
    text-align: center;
    font-size: 18px;
    border-radius: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.tile-button:hover {
    background-color: Red /* Darker green on hover */
}
2

Hi @Rebaz_Balisani:

I haven’t tried the whole thing, but check this, it should be

 button.addEventListener('click',openPurchaseInvoice);

Hope this helps.

1 Like
3

Hi @avc
thanks for your support, i replaced it and tried it and still it does not work

4

Hi,

If you put some
console.log(...)

for exemple

 const button = document.querySelector('#tile-button');
    console.log(button);
    if (button) {

and at toher different step and check the browser debugger console, what information can you collect ? Does it help you to find where your code failed ?

5

Hi:

Replace your javascript with:

function openPurchaseInvoice() {
    window.location.href = 'http://127.0.0.1:8000/app/purchase-invoice/new-purchase-invoice'; // Replace with the actual URL
}

const button = root_element.querySelector('#tile-button');
if (button) {
    button.addEventListener('click', openPurchaseInvoice);
} else {
    console.error('Button with ID "tile-button" not found.');
}

Hope this helps.

1 Like
6

@avc thanks for your support