0

I haven't changed anything in my web app but now I get a "Uncaught ReferenceError: updateTicket is not defined at HTMLButtonElement.onclick ((index):1:1)"

I have an index.html where I have "tickets" automatically inserted. The tickets are generated in my app.js file and include buttons that trigger the updateTicket() function I have in my app.js. I now get the mentioned error whenever I try to updateTicket().

Button Function Trigger inside Ticket

<button type="button" class="btn btn-outline-primary" id="${doc.id}" 
                onclick="updateTicket(this,
                document.getElementById('tracking${doc.id}').value,
                document.getElementById('carrier${doc.id}').value,
                document.getElementById('supplier${doc.id}').value,
                document.getElementById('supplierContact${doc.id}').value,
                document.getElementById('supplierPhone${doc.id}').value,
                document.getElementById('notes${doc.id}').value,
                '${testValue(doc.data().status)}',
                document.getElementById('buyPrice${doc.id}').value,
                document.getElementById('shipPrice${doc.id}').value)">
                UPDATE</button>

My updateTicket() function. (It invokes a firebase call to update the firestore database)

function updateTicket(e, tracking, carrier, supplier, supplierContact, supplierPhone, notes, status, buyPrice, shipPrice) {
console.log("Update Ticket");
db.collection("orders").doc(e.id).update(
    {
        notes: notes,
        tracking: tracking,
        carrier: carrier,
        supplier: supplier,
        supplierContact: supplierContact,
        supplierPhone, supplierPhone,
        status: status,
        // time: String(Date()).substring(0,21).trim()
        time: Date(),
        buyPrice: buyPrice,
        shipPrice: shipPrice
        
        
    });

}

This is my import in index.html

<script defer src="app.js" type="module"></script>
Sketsker
  • 1
  • See https://stackoverflow.com/a/59539045 Inline handlers may only reference global variables, but top-level module code runs in its own scope, like an IIFE. Best approach: ditch the inline handlers, they're pretty universally considered terrible practice - attach the event listeners properly using JavaScript instead – CertainPerformance Jul 14 '22 at 21:43
  • The issue is I have the tickets generated automatically with order numbers as the names, so I can't attach a unique variable name that corresponds to that order number. It would have to be something like this. const `btnUpdate${doc.id}` = document.getElementById("btnSignIn"); – Sketsker Jul 15 '22 at 14:27
  • Dynamic IDs in HTML are quite a code smell. Best to refactor your code to get rid of them. Options include: (*) Dynamically generate the elements with JavaScript on the client, starting with JSON from a network payload or ` – CertainPerformance Jul 15 '22 at 14:43

0 Answers0